将页面动态加载到 HTML答案

【问题标题】：dynamically loading a page into HTML将页面动态加载到 HTML
【发布时间】：2012-10-02 12:47:01
【问题描述】：

我有一个 Web 应用程序，它由一个 index.html 文件组成，其中包括一个 <iframe>。 index.html 文件在<iframe> 中加载不同的页面。这些页面中的每一个都有自己独立的 Javascript 和 CSS。

到目前为止一切正常。

我现在正在考虑使用 Ajax 调用将这些页面加载到 index.html 中的 <div> 中，而不是将它们加载到 <iframe> 中。我做了一些测试，这是可能的，但有一个问题让我担心，因为我是这项技术的新手，我想也许这里的一些专家可以分享知识。

问题 #1：

当将这些页面直接加载到 index.html 文件中的 <div> 时，新页面将加载到与 index.html 本身相同的 DOM 中。因此，元素类和页面 ID 之间可能存在冲突，并且在页面中托管 index.html 例如 $("#foo").hide(); 实际上会在 index.html 文件和页面中隐藏类为 foo 的元素。有什么办法，我可以将页面代码放在某种沙箱中，防止它影响index.html？

问题 #2：

当删除一个页面（可能用另一个页面替换它）时，它的代码的一部分仍然会留在内存中（as mentioned here）。有什么办法可以防止这种影响吗？当然，对第一个问题的肯定回答将涵盖这个问题因为如果页面在沙箱中运行，卸载页面也应该卸载它的 javascript 代码。

问题 #3：

该页面是一个完整的 HTML 文件，具有自己的 <head>、<body> 和 <title>元素。这意味着它也会受到来自托管index.html 文件的CCS 规则的影响。如何预防这些负面影响？

无需重新加载整个页面的分页导航系统似乎是许多现代网站的常见交互机制。如何在没有这些副作用的情况下动态加载页面（没有<iframe>）？

【问题讨论】：

标签： javascript

【解决方案1】：

您所说的听起来像是一个单页应用程序。在这种情况下，我建议您使用能够解决您面临的所有问题的众多现有框架之一。

有几个存在，这些只是一对。

Knockout.js (knockoutjs.com)

Ember.js (emberjs.com )

【讨论】：

感谢您提及这两个库。在选择一个之前，我还需要调查更多的库吗？例如，backbone.js 是一个选项吗？
是的，backbone.js 是另一个（非常流行的）选项。它比上面提到的两个更准系统，但是如果你将它与诸如 handlebars.js 之类的模板引擎配对，它就会非常强大
我对 Javascript 还是很陌生。我快速浏览了一下handlebars.js，它听起来很有趣。为了做出正确的选择，我还需要了解其他模板引擎吗？谢谢。
是和不是。 Knockout、Ember 和大多数其他类似框架都有自己的模板引擎，而 Backbone 没有。据我所知，车把几乎是通往那里的路，尽管我还没有对其他车把进行大量研究。一些 Google 工作肯定会提供比较表/博客文章，帮助您确定哪一个适合您，但最终您可能会接受其中任何一个。

【解决方案2】：

由于您可能认为迁移到一个成熟的新框架（在平行答案中提到）可能有点矫枉过正，所以我发布了一个带有一些考虑因素的答案。

问题 #1：

将新内容直接加载到托管页面后，就无法使用沙盒。您需要详细说明防止 ID 之间发生冲突的命名约定。例如，动态加载的片段中的所有元素都应具有带有特定前缀的 ID。

问题 #2：

您负责清理加载过程中涉及的所有方面。

问题 #3：

将带有自己的头部、身体和标题的动态加载片段放入 div 中并不是一个好主意。您应该加载纯内容。而且您无法阻止托管页面的 CSS 影响新片段，除非您再次为您的 CSS 样式（类）制定命名约定。

【讨论】：

【解决方案3】：

您无法安全地将具有副作用的页面注入您的页面。

您必须以不依赖全局状态的样式编写代码，我认为这需要大量工作。

原则上这意味着：

JavaScript 代码中没有全局变量
使用类名或唯一 ID 设置所有内容的样式，而不是标签名。
您有责任通过模板语言形式的代码或手动执行此操作来维护类名和 ID 的唯一性。

举个例子，你可以给内部 div 一个 id "page-container" 并改变页面的所有 css 规则，以便它们都以 #page-container 选择器为前缀。

如果做不到这一点，Web 应用程序框架通常用于编写单页 Web 应用程序，并清楚地展示了解决您提到的问题的能力。然而，这将意味着您需要对现有代码进行大量重组才能实现这一目标。

【讨论】：