jQuery/Ajax 加载的 DOM 脚本何时真正执行？答案

【问题标题】：When is a DOM script loaded by jQuery/Ajax actually executed?jQuery/Ajax 加载的 DOM 脚本何时真正执行？
【发布时间】：2011-11-08 15:48:05
【问题描述】：

好吧，我觉得问这个有点傻。类似问题有很多点击，但我似乎无法正确回答。如果我通过 jQuery/Ajax 修改 DOM，加载的脚本是什么时候真正解析/执行的？

以下代码适用于 F/F，但不适用于 Chrome 或 Opera。 '工作'意味着它执行'do_init（）'而没有错误。加载的脚本（实际上是一个 svg 文件；'file.svg'）定义了一些 'do_init()' 所需的变量（在 'static' 脚本中）。这些变量对 F/F 可见，但对 Chrome 或 Opera 不可见（“变量 xxx 未定义”）。文件/脚本在所有 3 种情况下都正确加载到 DOM 中，并且包含一个 <svg>，其中包含一个 <script>。

我可以通过重新排列代码在 Opera 中（或在 F/F 中中断）使其工作（svg 显示），但不能在 Chrome 中。使用 .success 和 .complete 没有区别。

谢谢。

<head>
...
<script type="text/javascript" src="do_init.js"></script>          
<script type="text/javascript"><![CDATA[
jQuery(document).ready(function() {
   ...
   $("#submit").click(function(e){
      e.preventDefault();
      var jqxhr =
         $("#svg").html(ajax_load).load("file.svg", function(response, status, xhr) {
            if(status == "error") {
               var msg = "Error: ";
               $("#error").html(msg + xhr.status + " " + xhr.statusText);
            } else {
               do_init(); // Ok in F/F, not in Chrome/Opera
            }
      });
   });
});
]]></script>
</head>
<body>
<button id="submit" type="button">Click Me!</button>
<div id="svg"></div>
</body>

编辑 1

事实证明，它们从未被执行过——至少在 IE9、FF8、Chrome、Opera 和 Safari 中是这样。它们在 FF7 中被执行。我刚刚编写了一个最小的测试页面，它执行一个脚本的 Ajax 加载，这只是一个警报。这仅在 FF7 中显示警报。我也试过用<svg> 包裹的脚本，这没什么区别。

【问题讨论】：

您可能想尝试使用 $.get() 而不是 load()。虽然 jQuery 文档声称脚本会被执行，除非你给 load() 一个目标，但我在使用 load() 加载脚本时遇到了问题，而我没有使用 $.get()
我刚刚尝试使用 get 代替，但在加载 DOM 时遇到了问题 - 这很容易加载。如果我可以加载 DOM，我会回帖，看看它是否有所作为......

标签： jquery ajax dom

【解决方案1】：

这就是为什么建议您将 javascript 定位在文档末尾、正文末尾的部分原因。

一般情况下，javascript会在遇到时执行；如果将它放在文档的顶部，它将在加载过程的早期运行，如果位于末尾则延迟。但是，当使用库的“onLoad”或“domReady”功能时，您会将执行推迟到以后。

有关更多信息，请参阅 jQuery 文档：http://api.jquery.com/ready/

虽然 JavaScript 在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（例如图像）之前，不会触发此事件。在大多数情况下，只要完全构建了 DOM 层次结构，就可以运行脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

编辑我误读了你问题的细节。动态加载的脚本会立即被解析，但onLoad 事件可能（也可能不会！）根据加载脚本的 HTTP 传输方面而不是根据加载脚本的解释来触发。通常，这很好（尽管有些浏览器不能可靠地触发事件 - IE，看着你），但你所追求的时间不是脚本被提取的时间，而是它实际被解析和激活的时间。这些应该在毫秒内，通常会使差异变得毫无意义。

对于使用这种技术解决问题有一些不同的看法，其中一些在here 和here 中进行了讨论——但似乎没有人特别提到 Chrome 是麻烦的根源。也就是说，建议的轮询包含脚本的方法（通过超时）似乎是建议中最不容易失败的方法，尽管它也是我最不喜欢的解决方案。

【讨论】：

我不太确定这是否相关。据我所知，ready 和 load 事件仅在最初加载文档时才相关。一旦事件触发，就是这样 - 我认为它们对于以后动态加载的脚本没有任何价值。还是他们？
谢谢 Chris - 刚刚经历过。同时，我做了一个有趣的观察，添加为上面的编辑#1。
我认为你是对的 - getScript 是要走的路。我不得不重新安排一切以确保 Ajax 调用只获取一个脚本，而没有 DOM 内容，并且我将 do_init 调用放在加载脚本的末尾，并且所有工作都一致。谢谢。