Ajax 加载带有内容的 javascript 和 css答案

【问题标题】：Ajax load javascript and css with contentAjax 加载带有内容的 javascript 和 css
【发布时间】：2012-08-04 00:03:02
【问题描述】：

我正在使用 jquery ajax 将内容从一个页面加载到当前页面的 div 中，类似于 gmail 在收件箱、垃圾箱等之间切换的方式。我使用的是 jQuery 的加载方法

$("#divGlobal").load("newPage.html #container");

将我需要的内容加载到我的 div 中。

newpage.html #container 也有与之关联的 javascript 和 css 文件。现在我通过将必要的<script> 和<link> 标签附加到<head> 来加载它们，但它并不总是有效。文件总是加载（我在 Firefox 中观看 XHR 信息），但似乎并不总是正常工作。

例如，如果我加载 page1.html 和相关文件（包括 UI 的 jQuery 函数），一切正常。但是，如果我随后加载 page2.html 并返回到 page1.html，文件加载但 jQuery 函数没有响应。

有没有更好的方法来加载与我正在加载的内容相关的 javascript 和 css 文件？

【问题讨论】：

以这种方式加载内容是一个非常糟糕的主意；它使页面更难维护，甚至打开可能的 XSS 漏洞。不要发送整个 html 页面（包含重复的 <html>、<head> 和 <body> 标签），而是考虑使用 AJAX 以纯数据语法（如 JSON）仅加载必要的页面数据。其他选项包括一次加载所有内容（减少 HTTP 请求），甚至在适当的情况下使用 iframe。

标签： javascript ajax jquery jquery-load

【解决方案1】：

重新加载您之前加载的相同 javascript 可能无法达到您想要的效果，因为所有变量和函数已经从之前的加载中定义，并且某些状态可能在之前的加载中已经存在。再次将其加载到同一页面中不会从头开始，这可能是您想要的。

如果您控制正在加载的页面，那么您可以通过专门设计的内容加载中的脚本来编写 javascript，以便它们完全按照您想要的方式设置状态并进行清理任何以前加载的状态，但是您必须以这种方式编写它们才能以这种方式工作。这将包括重置任何 DOM 修改、事件处理程序、全局变量等……脚本的第一次调用可能已修改。

【讨论】：