Question

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页面加载到“content”容器中。 ajax页面包含textarea字段，该字段将由tinyMCE插件填充。

在现代浏览器上测试时，一切似乎都很好。但是当在IE 8,9,10和Firefox 19这样的旧浏览器上时，我收到错误'tinymce' is undefined。但如果tinymce.min.js从同一台服务器加载，一切看起来都很好。

似乎旧浏览器不加载跨域脚本。但是当我进一步测试时，我发现它是由浏览器在加载tinymce.min.js之前执行内联脚本引起的。

那么，如何在加载所有脚本后最后执行内联脚本？或者，有没有其他方法可以让它有效？

谢谢。

Answer 1

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

将您的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 documentation。

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

Answer 2

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

中

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

Answer 3

如果您没有动态加载脚本或将其标记为延迟或异步，则会按照页面中遇到的顺序加载脚本。它是外部脚本还是内联脚本并不重要 - 它们按照页面中遇到的顺序执行。外部脚本之后的内联脚本将保留，直到它们之前的所有外部脚本都已加载并运行。

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

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

当动态插入脚本标记时，执行顺序的行为将取决于浏览器。简而言之，较新版本的Firefox默认动态添加脚本标记为异步，除非已设置脚本标记。

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

因此，您可能希望从外部下载js文件

如何延迟内联javascript的执行

3 个答案: