0

我有一个 Web 应用程序，它由一个index.html包含<iframe>. 该index.html文件在<iframe>. 这些页面中的每一个都有自己独立的 Javascript 和 CSS。

到目前为止一切正常。

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

问题 #1：

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

问题 #2：

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

问题 #3：

该页面是一个完整的 HTML 文件，具有自己的<head>,<body>和<title>元素。这意味着它也会受到托管index.html文件中的 CCS 规则的影响。我怎样才能防止这些负面影响？

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

4

3 回答 3

1

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

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

Knockout.js ( knockoutjs.com )

Ember.js ( emberjs.com )

于 2012-10-02T13:11:19.250 回答
1

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

您将不得不以不依赖全局状态的风格编写代码，我认为这需要大量工作。

原则上，这意味着：

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

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

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

于 2012-10-02T13:18:24.993 回答
1

由于您可能会决定迁移到一个成熟的新框架（在并行答案中提到）可能是一种矫枉过正的做法，因此我发布了一个带有一些考虑因素的答案。

问题 #1：

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

问题 #2：

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

问题 #3：

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

于 2012-10-02T13:20:09.500 回答