我的网络应用程序由index.html文件组成，其中包含<iframe>。 index.html文件会在<iframe>中加载不同的页面。每个页面都有自己独立的Javascript和CSS。
到目前为止一切正常。
我现在正在考虑使用Ajax调用将这些页面加载到index.html中的<div>，而不是将它们加载到<iframe>中。我做了一些测试，这是可能的，但有一个问题令我担心，因为我是这个技术的新手，我想也许这里的一些专家可以分享知识。
问题＃1：
将这些页面直接加载到<div>文件中的index.html时，新页面会加载到与index.html本身相同的DOM中。因此，元素类和页面ID之间可能存在冲突，而页面中的index.html托管$("#foo").hide();实际上会隐藏foo文件中具有类index.html的元素以及页面。有什么办法，我可以将页面代码放在某种沙盒中，防止它影响index.html吗？
问题＃2：
删除页面时（可能用其他页面替换它），其代码的风险部分仍将留在内存中（as mentioned here）。有什么方法可以防止这种影响吗？当然，第一个问题的正面答案将涵盖这一问题 因为如果页面在沙箱中运行，卸载页面也应该卸载它的javascript代码。
问题＃3：
该页面是一个完整的HTML文件，其中包含自己的<head>，<body>和<title>元素。这意味着它将受托管index.html文件中的CCS规则的影响。我该如何预防这些负面影响？
无需重新加载整个页面的分页导航系统似乎是许多现代网站的常见交互机制。如何在没有这些副作用的情况下动态加载页面（没有<iframe>）？
答案 0 :(得分：1)
你在说什么听起来像一个单页应用程序。在这种情况下，我建议使用许多现有框架中的一个来解决您面临的所有问题。
有几个存在，这些只是一对。
Knockout.js（knockoutjs.com）
Ember.js（emberjs.com ）
答案 1 :(得分：1)
您无法安全地将具有副作用的页面注入页面。
你必须以不依赖于全局状态的样式编写代码，我认为这是很多工作。
原则上这意味着：
为了给你一个例子，你可以给内部div一个id "page-container"，并改变你页面的所有css规则，这样它们都会以#page-container选择器为前缀。< / p>
如果不这样做，Web应用程序框架通常用于编写单页Web应用程序，并清楚地展示了解决您提到的问题的能力。然而，这意味着要对现有代码进行大量重组才能实现这一目标。
答案 2 :(得分：1)
正如你可能认为转向一个完全成熟的新框架（在平行答案中提到）可能是一种矫枉过正，我会发布一个带有一些考虑因素的答案。
问题＃1：
直接将新内容加载到托管页面后，就不会有沙盒。您需要详细说明一种命令约定，以防止ID之间发生冲突。例如，动态加载的片段中的所有元素都应具有带有特定前缀的ID。
问题＃2：
您有责任清理装载过程中涉及的所有方面。
问题＃3：
使用自己的头部，主体和标题将动态加载的片段放入div中并不是一个好主意。你应该加载一个纯粹的内容。而且你没有选择阻止托管页面的CSS影响新的片段，除非你再次详细说明CSS样式（类）的命名约定。