javascript - 如何延迟内联javascript的执行

Question

主.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。