javascript - 用 Javascript 加载 jQuery 并使用 jQuery

Question

我使用以下方法将 jQuery 库附加到 dom：

 var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

但是，当我运行时：

jQuery(document).ready(function(){...

控制台报错：

Uncaught ReferenceError: jQuery is not defined

如何动态加载 jQuery 并在 dom 中使用它？

score 147 · Accepted Answer

这里有一个工作 JSFiddle 和一个小例子，它准确地展示了你在寻找什么（除非我误解了你的请求）：http: //jsfiddle.net/9N7Z2/188/

这种动态加载javascript的方法存在一些问题。当涉及到非常基础的框架时，例如 jQuery，您实际上可能希望静态加载它们，因为否则，您将不得不编写一个完整的 JavaScript 加载框架......

你可以使用一些现有的 JavaScript 加载器，或者通过观察来编写你自己的加载器window.jQuery。

// Immediately-invoked function expression
(function() {
  // Load the script
  const script = document.createElement("script");
  script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
  script.type = 'text/javascript';
  script.addEventListener('load', () => {
    console.log(`jQuery ${$.fn.jquery} has been loaded successfully!`);
    // use jQuery below
  });
  document.head.appendChild(script);
})();

请记住，如果您需要支持非常旧的浏览器，例如 IE8，load则不会执行事件处理程序。在这种情况下，您需要轮询是否存在window.jQuery使用 repeat window.setTimeout。这里有一个使用该方法的有效 JSFiddle：http: //jsfiddle.net/9N7Z2/3/

有很多人已经完成了你需要做的事情。查看一些现有的 JavaScript 加载器框架，例如：

~~https://developers.google.com/loader/~~（不再记录）
~~http://yepnopejs.com/~~（已弃用）
http://requirejs.org/

score 8 · Accepted Answer

还有另一种动态加载 jQuery 的方法（source）。你也可以使用

document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');

使用被认为是不好的做法document.write，但为了完整起见，最好提及它。

请参阅为什么 document.write 被认为是“不好的做法”？原因。优点是确实document.write会阻止您的页面加载其他资产，因此无需创建回调函数。

score 6 · Accepted Answer

Encosia 的网站建议：

<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
  google.load("jquery", "1.7.2");

  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

但即使是他也承认，就最佳性能而言，这与执行以下操作相比是无法比拟的：

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
    <script type="text/javascript" src="scripts.js"></scripts>
</body>
</html>

score 3 · Accepted Answer

您需要在 jQuery 完成加载后运行您的代码

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = function(){
    // your jQuery code here
}

或者如果你在异步函数中运行它，你可以await在上面的代码中使用

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
// your jQuery code here

如果你想先检查页面中是否已经存在 jQuery，试试这个

score 0 · Accepted Answer

HTML：

<html>
  <head>

  </head>
  <body>

    <div id='status'>jQuery is not loaded yet.</div>
    <input type='button' value='Click here to load it.' onclick='load()' />

  </body>
</html>

脚本：

   <script>

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
        }

        // dynamically load any javascript file.
        load.getScript = function(filename) {
          var script = document.createElement('script')
          script.setAttribute("type","text/javascript")
          script.setAttribute("src", filename)
          if (typeof script!="undefined")
          document.getElementsByTagName("head")[0].appendChild(script)
        }

        </script>

score 0 · Accepted Answer

您收到此错误的原因是 JavaScript 没有等待加载脚本，所以当您运行

jQuery(document).ready(function(){...

不能保证脚本已经准备好（永远不会）。

这不是最优雅的解决方案，但它是可行的。本质上，您可以每 1 秒检查一次 jQuery 对象广告在加载您的代码时运行一个函数。我还会添加一个超时（比如运行 20 次后的 clearTimeout）以阻止检查无限期地发生。

var jQueryIsReady = function(){
    //Your JQuery code here
}

var checkJquery = function(){
    if(typeof jQuery === "undefined"){
        return false;
    }else{
        clearTimeout(interval);
        jQueryIsReady();
    }
}
var interval = setInterval(checkJquery,1000);

score 0 · Accepted Answer

使用require.js你可以以更安全的方式做同样的事情。您可以只定义对 jquery 的依赖关系，然后在加载依赖项时执行您想要的代码，而不会污染命名空间：

我通常推荐这个库来管理对 Javascript 的所有依赖项。它很简单，可以有效优化资源加载。但是，在将它与 JQuery 一起使用时，您可能需要采取一些预防措施。我最喜欢的处理它们的方法在这个github 存储库中进行了解释，并通过以下代码示例反映出来：

<title>jQuery+RequireJS Sample Page</title>
   <script src="scripts/require.js"></script>
   <script>
   require({
       baseUrl: 'scripts',
       paths: {
           jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
       },
       priority: ['jquery']
    }, ['main']);
    </script>

score 0 · Accepted Answer

在DevTools控制台中，您可以运行：

document.getElementsByTagName("head")[0].innerHTML += '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>';

在https://code.jquery.com/jquery/检查可用的 jQuery 版本。

要检查它是否已加载，请参阅：Checking if jquery is loaded using Javascript。

javascript - 用 Javascript 加载 jQuery 并使用 jQuery

8 回答 8

Related

Reference