Question

我正在创建一个库，并且希望将jQuery包含在用户的HTML文件中（如果未包含）。

在下面的链接中有一些建议可以做到这一点：

但是，我不知道为什么它不起作用。

以下是HTML和.js代码：

 document.head.innerHTML += "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>";

<!DOCTYPE html>
    <html>
        <head>
            <script src="mydebugger.js"></script>
        </head>
        <body>
            <div></div>
            <script>
                $("div").html("Hi");
                console.log(document);
            </script>
        </body>
    </html>

您可以通过控制台看到<script>已添加到<head>，但是它根本无法正常工作。

请考虑，我只能从.js文件中添加jQuery，而不能将其直接添加到HTML文件中。

Answer 1

以下是我认为适合您的解决方案：

// This will check if jQuery has loaded. If not, it will add to <head>
window.onload = function() {
  if (!window.jQuery) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://code.jquery.com/jquery-latest.min.js';
    head.appendChild(script);
  }
}

// This will wait until Jquery is loaded then fire your logic
defer(function () {
  $("div").html("Hi");
  console.log(document);
});


function defer(method) {
  if (window.jQuery) {
    method();
  } else {
    setTimeout(function() { defer(method) }, 50);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <script src="mydebugger.js"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

Answer 2

如果您不能在head元素中设置，则可以通过Javascript追加。之后，您将需要间隔一段时间才能等待jQuery的加载和定义，然后才能使用它。

这将起作用：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div></div>
        <script>
        if(!window.jQuery) {
          (function appendJQueryToHead() {
            var script = document.createElement("script");
             script.type = "text/javascript";
             script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
             document.head.appendChild(script);
          })();
        }

        var waitForJQuery = setInterval(function() {
            if(window.jQuery) {
                clearInterval(waitForJQuery);
                init();
            }
        }, 100);

        function init() {
            $("div").html("Hi");
            console.log(document);
        }
        </script>
    </body>
</html>

如果不存在，则包括来自.js文件的jQuery

2 个答案: