如果不存在，则包括来自.js文件的jQuery
[英]Include jQuery from .js file if it is not present
问题描述
I am creating a library and I want to include jQuery to a user's HTML file if it wasn't included it. 
我正在创建一个库，并且如果不包含jQuery，我想将jQuery包含到用户的HTML文件中。
There were some suggestions to do it in the link below: 在下面的链接中有一些建议可以做到这一点：
How to add jQuery in JS file 如何在JS文件中添加jQuery
However, I don't know why it is not working. 但是，我不知道为什么它不起作用。
Here are the HTML and .js codes: 以下是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>
You can see via the console that the <script> is added to <head> but it just won't work. 您可以通过控制台看到<script>已添加到<head>但是它无法正常工作。
Please consider, I can only add jQuery from the .js file and I cannot add it directly into the HTML file. 请考虑，我只能从.js文件中添加jQuery，而不能将其直接添加到HTML文件中。
2 个解决方案
解决方案1
2 已采纳 2019-06-11 22:30:51
Here is a solution that I think will work well for you: 我认为这是一个适合您的解决方案：
// 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>
解决方案2
0 2019-06-11 22:54:32
If you can't set in in the head element you can append it via Javascript. 如果您不能在head元素中设置，则可以通过Javascript附加它。 Afterwards you will need to make an interval to wait for jQuery to be loaded and defined before you can use it. 之后，您将需要间隔一定的时间来等待jQuery的加载和定义，然后才能使用它。
This would work: 这将工作：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.