如何在单个js文件中包含jQuery库,而不会干扰现有的库

时间:2014-09-10 02:22:28

标签: javascript jquery include conflict

第三方网站可以将我的脚本标记放在他们的网站上,例如头部中的ExternalSite.html:

<script type="text/javascript">
(function () {
    var ttScript = document.createElement('script'); ttScript.async = true;
    ttScript.src = '//www.example.com/script/myscript.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ttScript);
})();
</script>

在我自己的服务器上,在myscript.js文件中我有这段代码:

$.ajax({
    url: "http://www.example.com/iplookup.php",
    data: null,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp'
}).done(function (json) {
    self.ip = json;
});

但是,一旦用户访问第三方网站,我就会在第一行获得Uncaught ReferenceError: $ is not defined

现在这可能是因为我没有在第三方网站上引用jQuery,其中包含了myscript.js文件。问题是:

  1. 我不知道这个第三方网站是否运行了jQuery
  2. 我不知道如何从myscript.js引用jQuery,也不会干扰第三方网站上现有的jQuery引用

1 个答案:

答案 0 :(得分:0)

首先进行检查 使用javaScript进行jQuery加载

    window.onload = function() {
        if (window.jQuery) {
            // jQuery is loaded  
            // Now insert your scripts        
        } else {
            // jQuery is not loaded
            // Load it manually from any cdn e.g., //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js        
        }
    }

还有一些其他类似的方法可以检查我们可以使用

    if (typeof jQuery != 'undefined') {
        // jQuery is loaded  
    } else {
        // jQuery is not loaded
    }

    if (jQuery) {
        // jQuery is loaded  
    } else {
        // jQuery is not loaded
    }

atornblad 可以使用fiddle,它也可以告诉jQuery加载的时间。

您可以寻找更好的参考。

希望这会有所帮助..