动态加载脚本文件时出现错误“对象函数‘模态’没有方法”

Question

从正文中的脚本，我将 jquery 和 SimpleModal 动态加载到页眉中。我使用回调来确保在调用 jQuery 之前完全加载它——这很有效。但是，当我动态加载 SimpleModal 脚本文件时，我无法随后调用它的方法。当 SimpleModal 脚本延迟加载时，它会出现无法引用当前文档对象。任何帮助将不胜感激。

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    jQuery = window.jQuery.noConflict(true);

    main();
}

/******** Main function ********/
function main() {
    jQuery(document).ready(function ($) {
        var domain = 'http://qo.microssoftware.com';

        /******* Load SimpleModal *******/
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
        domain + "/js/simplemodal.js");
        script_tag.onload = modalLoadHandler;
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

    });
}

function modalLoadHandler() {
    /******* Open Modal *******/
    $.modal("<div><h1>SimpleModal</h1></div>", {});
}

Answer 1

试试：

<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $.modal("<div><h1>SimpleModal</h1></div>");
});
</script>

或者，如果您想使用 main() 函数调用模式：

<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    function main() {
        $.modal("<div><h1>SimpleModal</h1></div>");
    }
});
</script>

你不需要把js放在header中……实际上有些程序员总是把他们所有的js放在结束的BODY-tag之前。

Answer 2

我认为这是不必要的，首先。 simplemodal 脚本非常紧凑。更多地考虑如何在一般情况下优化脚本加载（gzip，或者如果你必须使用 ajax，使用 RequireJS 或类似的 AMD 依赖加载），而不需要这种 ajax 方法的不必要的复杂性。

使用此类方法的脚本加载器（如 Facebook SDK 或 Google 地图）将在脚本初始化后搜索窗口（全局）元素以查找要调用的回调。基本上，您必须修改 simplemodal 代码，然后将您的依赖代码包装在回调中。在这种情况下，我几乎看不出这有什么必要。

Answer 3

这是您希望基于脚本的onload 事件创建异步闭包的地方。

如果你必须支持古老的 IE，你也可以挂钩到 onreadystatechange 事件，就像你在 AJAX 请求中做的一样（在纯 JS 中）。 更现代的浏览器不会触发此事件。

因此，将 onload 转换为回调，它会触发文件中的已知方法。 您还可以通过附加到脚本加载的onerror 来绕过错误。