如何在外部的.js文件中引入jQuery？

Question

我希望能为我的客户提供一个简单的代码来插入和获取我的插件。

代码如下：

<div id='banner-lujanventas'></div>
<script src="http://lujanventas.com/plugins/banners/script.js" type="text/javascript"></script>

问题是我的插件只能与jQuery一起使用。我该如何检查script.js文件中是否安装了jQuery版本，如果没有则包含它？（我只能修改/script.js文件）

- lisovaccaro

Answer 1

创建自己的脚本元素：

创建自己的脚本元素：

if (typeof jQuery === "undefined") {
    var script = document.createElement('script');
    script.src = 'http://code.jquery.com/jquery-latest.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
}

//edit
window.onload = function() {
    $(function(){ alert("jQuery + DOM loaded."); });
}

您必须将真正的onload代码放在window.onload()函数中，而不是$(document).ready()函数中，因为此时jquery.js未必已经加载完成。

- zessx

---

请注意，如果未定义jQuery，则if（！jQuery）将引发错误。您应该执行if（typeof jQuery ===“undefined”）。 - nicosantangelo

它已经包含了，但是jQuery无法工作。我在你的代码 $(function(){ alert("jQuery + DOM loaded."); }); 之后添加了一个事件监听器，但它从未显示警报。我该如何解决这个问题？ - lisovaccaro

你不能直接尝试这种代码，请看我的编辑以了解详情。 - zessx

如果jQuery已经定义，检查其版本以确保使用的是代码所需的最低版本可能是个好主意。问题在于，如果没有呢？可以包含多个版本的jQuery而不会发生冲突吗？ - Rooster242

Answer 2

你可以检查jQuery变量。

if (typeof jQuery === 'undefined') {
    // download it
}

如果需要下载选项，例如异步 vs. document.write，请查看此文章。

- calebds

Answer 3

类似这样：

<script>!window.jQuery && document.write(unescape('%3Cscript src="http://yourdomain.com/js/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>

- Fluidbyte

---

这应该是在外部的 .js 文件中。我不认为这是打算这样做的。或者呢？ - lisovaccaro

Answer 4

我找到了一些旧代码，它寻找特定版本的jQuery并在未找到时加载它，同时避免与页面上已经使用的任何现有jQuery发生冲突：

// This handles loading the correct version of jQuery without 
// interfering with any other version loaded from the parent page.
(function(window, document, version, callback) {
    var j, d;
    var loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://code.jquery.com/jquery-2.1.0.min.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
    }
})(window, document, "2.1", function($) {
    $(document).ready(function() {
        console.log("Using jQuery version: " + $.fn.jquery);

        // Your code goes here...

    });
});

- Rooster242