当一个DOM脚本通过jQuery的加载/ Ajax的实际执行？ [英] When is a DOM script loaded by jQuery/Ajax actually executed?
问题描述
好吧，我觉得不必问这个有点哑。现在有许多类似问题的点击率，但我似乎无法得到它的权利。如果我修改通过jQuery /阿贾克斯的DOM，当一个加载脚本实际上解析/执行？
Ok, I feel a bit dumb having to ask this. There are any number of hits on similar questions, but I can't seem to get it right. If I modify the DOM via jQuery/Ajax, when is a loaded script actually parsed/executed?
下面的F / F作品中的code，但不是在Chrome或Opera。 工作意味着执行do_init（）没有错误。加载的脚本（实际上的SVG文件;'file.svg'）定义了一些所需要由瓦尔的'do_init（）'（这是在静态脚本）。这些增值经销商是可见的F / F，而不是Chrome或歌剧（变量xxx是未定义）。文件/脚本正确加载到所有3例DOM，并包含一个＆LT; SVG＆GT; ，用＆LT;脚本＆GT; 里面。
The code below works on F/F, but not on Chrome or Opera. 'Working' means that it executes 'do_init()' without error. The loaded script (actually an svg file; 'file.svg') defines a number of vars which are required by 'do_init()' (which is in the 'static' script). These vars are visible to F/F, but not to Chrome or Opera ("variable xxx is undefined"). The file/script is correctly loaded into the DOM in all 3 cases, and contains an <svg>, with a <script> inside it.
我能得到这个在Opera工作（SVG的显示器）（或F / F突破）通过重新排列code，但不是在Chrome浏览器。使用.success和.complete没什么区别。
I can get this to work (the svg displays) in Opera (or break in F/F) by re-arranging code, but not in Chrome. Using .success and .complete makes no difference.
感谢。
<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警报。我也试着包在脚本中的＆LT; SVG＆GT; ，这没有什么区别
It turns out that they're never executed - at least in IE9, FF8, Chrome, Opera, and Safari. They are executed in FF7. I've just written a minimal test page which does an Ajax load of a script which is just an alert. This only shows an alert in FF7. I've also tried the script wrapped in an <svg>, which makes no difference.
推荐答案
这就是为什么我们建议您找到的JavaScript在文档的末尾，在身体末端的部分原因。
This is part of the reason why it is recommended that you locate javascript at the end of the document, at the end of the body.
一般地，JavaScript的被执行，因为它遇到;如果你把它在文档的顶部，它将运行在装载过程的早期，晚期如果位于末端。然而，使用图书馆的onLoad或domready中的功能时，你就推迟执行，直到稍后的时间。
Generally, javascript is executed as it is encountered; if you put it at the top of the document, it will run early in the load process, late if located at the end. However, when using a library's "onLoad" or "domReady" functionality, you're deferring execution until a later time.
请参阅jQuery的文档以了解更多信息： http://api.jquery.com/ready/
See the jQuery docs for more information: http://api.jquery.com/ready/
虽然JavaScript提供用于执行code时，呈现页面时加载事件，此事件不会被触发，直至如图像的所有资产已被完全接收。在大多数情况下，脚本可以尽快在DOM层级已经完全构造运行。传递给。就绪处理程序（）是保证执行后DOM是准备好了，所以这通常是连接所有其他的事件处理程序和运行其它jQuery的code的最佳场所。当使用依赖于CSS样式属性值的脚本，重要的是要引用外部样式或嵌入样式元素引用脚本之前。
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
修改
我误解你的问题的细节。动态加载脚本立即解析，但是的onLoad 事件可能（或可能不会！）按照加载脚本的HTTP传输方面，而不是在间被解雇加载脚本pretation。通常情况下，这是好的（虽然有些浏览器不可靠触发事件 - IE，看着你），但你以后的时间不是当脚本已经被取出，但是当它被实际分析和积极的。这些应该是在几毫秒内，通常呈现不同的意义。
EDIT
I misread the details of your question. A dynamically loaded script is parsed immediately, but the onLoad event may (or may not!) be fired in accordance with the HTTP transport aspect of the loaded script rather than upon the interpretation of the loaded script. Usually, this is fine (though some browsers don't reliably fire the event - IE, looking at you), but the timing you're after is not when the script has been fetched, but when it is actually parsed and active. These should be within milliseconds, usually rendering the difference meaningless.
有一些不同的需要解决的问题与这种技术，其中的一些讨论此处这里 - 没有似乎特别提到Chrome浏览器作为一个麻烦的来源，但。这就是说，轮询所包含的脚本的建议的方法（通过超时）似乎是至少容易发生故障的建议，虽然它也是我喜欢至少该溶液中。
There are some varying takes on solving issues with this technique, some of which are discussed here and here - none seem to specifically mention Chrome as a source of troubles though. That said, the suggested approach of polling for the included script (via a timeout) seems to be the least failure-prone of the suggestions, though it is also the solution I like least.
这篇关于当一个DOM脚本通过jQuery的加载/ Ajax的实际执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
