如何延迟内联javascript的执行

How to delay execution of inline javascript

本文关键字：javascript 执行 何延迟 延迟      更新时间：2023-09-26

Main.php

<script>
$.ajax({
    type: 'GET',
    url: 'ajax.php', 
    context: document.body,
    success: function(data) {
        $("#content").html(data);
    }
});
</script>
<div id="content"></div>

ajax.php

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
$(function(){
    tinymce.init({selector:'textarea'});
    alert("script executed");
});
</script>
<textarea>Your content here.</textarea>

主页面将ajax页面加载到"内容"容器中。ajax页面包含文本区域字段，该字段将由tinyMCE插件填充。

在现代浏览器上测试时，一切似乎都很好。但在IE 8、9、10和Firefox 19等旧浏览器上，我会收到一个错误，说'tinymce' is undefined。但是，如果tinymce.min.js是从同一台服务器加载的，那么一切似乎都会恢复正常。

旧浏览器似乎没有加载跨域脚本。但当我进一步测试时，我发现这是由于浏览器在加载tinymce.min.js之前执行内联脚本造成的。

那么，在加载了所有脚本之后，我如何才能让内联脚本最后执行呢？或者，还有其他方法可以让它发挥作用吗？

谢谢。

问题是jQuery.ajax调用剥离传入的脚本标记，异步加载引用的脚本，并立即执行内联脚本，因此它们的顺序错误。为了解决这个问题，可以使用jQuery加载依赖项，并将init代码放入成功回调中。

将您的ajax.php更改为如下所示：

<script>
    $.getScript("http://tinymce.cachefly.net/4.0/tinymce.min.js", function() {
        tinymce.init({selector:'textarea'});
        alert("script executed");
    });
</script>
<textarea>Your content here.</textarea>

有关更多信息，请参阅jQuery文档。

注意如果您不止一次这样做，那么您将不止一次加载tinymce库，这很糟糕。也许最好只在main.php中加载一次tinymce。

如果没有动态加载脚本或将其标记为defer或async，则脚本将按照页面中遇到的顺序加载。不管是外部脚本还是内联脚本，它们都是按照在页面中遇到的顺序执行的。外部脚本之后的内联脚本将被保留，直到加载并运行之前的所有外部脚本为止。

异步脚本（无论它们如何被指定为异步）以不可预测的顺序加载和运行。浏览器并行加载它们，并且可以自由地按任何顺序运行它们。

在多个异步事物之间没有可预测的顺序。如果需要一个可预测的顺序，那么就必须通过注册异步脚本的加载通知并在加载适当的东西时手动排序javascript调用来对其进行编码。

动态插入脚本标记时，执行顺序的行为将取决于浏览器。简而言之，Firefox的新版本默认将动态添加的脚本标记添加到async，除非对脚本标记进行了其他设置。

插入脚本的脚本在IE和WebKit中异步执行，但是在Opera和4.0之前的Firefox中同步。

因此，您可能希望下载js文件，并将其包含在外部

在您的情况下，您可以将代码放入window.onload 中

window.onload = function(){
   // this will fire only when all the resources including scripts, images are loaded.
}
相关文章：