jQuery 使用脚本标签

Question

为什么加载dom的时候脚本标签还在，但是没有执行？假设我有这个代码

History.Adapter.bind(window, 'statechange', function(e) { // Note: We are using statechange instead of popstate
        var State = History.getState();
        $('#main-content').load(State.url + " #main-content");
    });

我将从给定的 url 加载“#main-content”的内容。给定的 url 并且该 url 包含这个

<div id = "main-content">
<script>
$(document).ready(function(){
  console.log($('audio'));
})
</script>
</div>

为什么控制台没有显示音频？

Answer 1

正如http://api.jquery.com/load/ 所述，以这种方式加载的脚本可能无法执行的原因有几个。

在这种情况下，您使用带后缀的选择器表达式仅将获取的部分内容插入到当前文档中。这样做的缺点是，在将内容的任何部分实际插入文档之前，脚本将从内容中剥离。

jQuery load 方法的源码（v1.9.1）中提到了排除脚本的原因

// 如果指定了选择器，则在虚拟 div 中定位正确的元素

// 排除脚本以避免 IE 'Permission Denied' 错误

如果可能的话，我会通过让服务器只响应“main-content” div 来解决这个问题 - 可能由附加到初始 URL 的查询字符串触发 - 并在没有选择器的情况下加载它。

根据某些条件仅返回文档的一部分完全取决于生成文档的服务器端应用程序（如果有）。如果您 - 例如 - 正在使用 PHP，请将脚本更改为调用 load(State.url + "?section=main-content")，然后让 PHP 检查 $_GET['section'] 是否等于“main-content”。在这种情况下，除了要更新的 div 之外，跳过渲染所有内容。我无法就这部分问题给出更详细的答案，因为如何取决于您在服务器上运行的什么。

如果您提供静态文件并且主机不运行 PHP 或其他语言，我已经 听说其他人建议先将整个文档加载到 iFrame 中（在 load() 调用中没有 #main-content 部分），然后使用纯 JavaScript 在主文档中提取您希望更新的部分。它可能适用于您的情况，但您的脚本很可能会执行两次。首先加载文档的所有脚本部分在 iFrame 的上下文中执行，然后提取部分的脚本部分将在插入主文档时再次执行。

如果您提供静态文件，但主机确实运行 PHP 或其他语言，则可能可以编写一个小脚本来仅提取文档的部分你需要。这样的脚本可以基于PHP DOM and returning only part of document，但被修改为从 GET/query 参数中获取 XHTML 文件的路径。这需要将您的加载调用更改为 something，例如 load("path/to/extraction_script.php?filename=" + escape(State.url) + "&section=main-content")，以便将先前访问页面的整个路径发送到服务器。

注意：这样做可能会带来重大的安全漏洞，因为您实际上是在创建一个代理服务器，该服务器能够读取它有权访问的服务器上的任何文件，包括外部 URL，除非您是非常小心。我不推荐这种方法，我也无法测试它在实践中是否真的有效。这取决于您的服务器配置和文档的外观。