Question

好的，我觉得有点愚蠢不得不问这个。在类似的问题上有任意数量的点击，但我似乎无法做到正确。如果我通过jQuery / Ajax修改DOM，何时加载的脚本实际被解析/执行？

以下代码适用于F / F，但不适用于Chrome或Opera。 “工作”意味着它执行'do_init（）'而不会出错。加载的脚本（实际上是一个svg文件;'file.svg'）定义了'do_init（）'（在'静态'脚本中）所需的许多变量。这些变量对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>包裹的脚本，这没什么区别。

Answer 1

这是为什么建议您在文档的末尾，在正文末尾找到javascript的部分原因。

通常，javascript会在遇到时执行;如果你把它放在文档的顶部，它将在加载过程的早期运行，如果位于最后，则会延迟。但是，当使用库的“onLoad”或“domReady”功能时，您将执行推迟到以后的时间。

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

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

修改我误解了你问题的细节。动态加载的脚本会立即被解析，但onLoad事件可能（或可能不会）根据加载的脚本的HTTP传输方面而不是解释加载的脚本来触发。通常情况下，这很好（虽然有些浏览器不能可靠地触发事件 - IE，看着你），但是你所追求的时间不是在获取脚本时，而是在实际解析并激活时。这些应该在几毫秒内，通常使差异无意义。

使用此技术解决问题有一些不同的需要，其中一些讨论here和here - 似乎没有人特别提到Chrome是麻烦的来源。也就是说，建议的包含脚本轮询的方法（通过超时）似乎是最不容易出错的建议，尽管它也是我最不喜欢的解决方案。

什么时候由jQuery / Ajax加载的DOM脚本实际执行？

1 个答案: