Question

我目前正在尝试开发一个可嵌入现有网页的JavaScript应用程序（我无法修改）。该应用程序需要特定版本的jQuery。

用于加载应用程序的脚本执行以下操作：

// loading JavaScript needed by my application
(function () {
    document.write('<script src="../jquery-1.10.2.min.js"></script>');
    document.write(...); // load other scripts (using jQuery 1.10.2)

    // storing the application's jQuery in a new namespace 
    // to avoid conflicts with other jQuery versions
    document.write('<script type="text/javascript">' + 
        'appJQ = jQuery.noConflict(true);</script>'); // error: jQuery is undefined in IE<10
})();

// initializing the application itself
document.onload = function() {
    // ...
};

这在我测试的每个浏览器中都能正常工作，除了IE＆lt; 10.在IE 9及更低版本中，我收到jQuery未定义的错误。

将jQuery移动到document.onload函数中的新命名空间将适用于我的应用程序，但如果需要不同版本的jQuery，则会导致包含我的应用程序的网页上的其他脚本发生冲突。

您对如何解决此问题有任何建议吗？谢谢你的帮助！

Answer 1

根据Hamza的回答，您可以使用以不同方式加载的方法：

var s = document.createElement("script");
s.src = "../jquery.min.js"     // insert your own jQuery link
s.onload = function() {
    var appJS = jQuery.noConflict(true);
}

希望这有帮助。

Answer 2

尝试创建document.write元素并为该元素定义onload处理程序，而不是使用<script>：

(function () {
    var script = document.createElement('script');
    script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js';
    script.onload = function() {
        var appJQ = jQuery.noConflict(true);
        // app initialization code
    };
  var head = document.head || document.getElementsByTagName('head')[0];
  head.appendChild(script);
})();

如果您有多个相互依赖的脚本，您可能想尝试使用脚本加载器，例如HeadJS或LABjs。

如果您想要更灵活地管理依赖项，可以尝试使用模块加载器，例如RequireJS，Browserify或webpack。

Answer 3

在考虑加载文档后，也会发生document.write调用，在这种情况下，onload函数可能会在第一个函数的内容之前触发。您希望以更好的方式加载javascript文件，以便他们的 onload启动应用程序本身。

避免动态加载的JavaScript应用程序中的jQuery冲突

3 个答案: