如何使用纯javascript在任何网站中动态包含jQuery [英] How to include jQuery dynamically in any website using pure javascript
问题描述
我正在尝试动态包含jquery，并且我使用了以下代码 -
I am trying to include jquery dynamically and i have used the following code-
index.php
index.php
<!doctype html>
<html>
<head>
<script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#testing').html('<p>This is a paragraph!</p>');
});
</script>
</body>
</html>
includejquery.js
includejquery.js
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
jQuery.noConflict();
}
但jquery功能不起作用它不打印段落标签:-(请帮帮我。提前致谢
But jquery functionality is not working it is not printing the paragraph tag :-( Please help me out. Thanks in advance
推荐答案
因为你的 $（文件）.ready已经无法正常工作（... 在 jQuery加载之前运行，因此它失败，因为 $ 未定义（抛出 ReferenceError ）或者它指的是jQuery以外的东西。另外，你在jQuery之前调用 jQuery.noConflict（）加载，如果该调用 工作，则意味着 $ 根本不再引用jQuery，所以 $ （文件）.ready（... 仍然无效。
That's not working because your $(document).ready(... line runs before jQuery loads, and so it fails because either $ is undefined (throwing a ReferenceError) or it refers to something other than jQuery. Also, you're calling jQuery.noConflict() before jQuery is loaded, and if that call did work, it would mean that $ no longer referred to jQuery at all, so $(document).ready(... still wouldn't work.
在任何现代浏览器中，你都可以使用在你要添加的事件，它告诉你脚本已被加载。可能最好将回调传递给你打电话到脚本元素上加载 includejquery.js ，就像你一样是：
In any modern browser, you can use the load event on the script element you're adding, which tells you that the script has been loaded. Probably best to pass a callback into a call you make to includejquery.js, like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="includejquery.js"></script>
</head>
<body>
<div id="testing"></div>
<script type="text/javascript">
includejQuery(function($){
$('#testing').html('<p>This is a paragraph!</p>');
});
</script>
</body>
</html>
includejquery.js ：
function includejQuery(callback) {
if(window.jQuery)
{
// jQuery is already loaded, set up an asynchronous call
// to the callback if any
if (callback)
{
setTimeout(function() {
callback(jQuery);
}, 0);
}
}
else
{
// jQuery not loaded, load it and when it loads call
// noConflict and the callback (if any).
var script = document.createElement('script');
script.onload = function() {
jQuery.noConflict();
if (callback) {
callback(jQuery);
}
};
script.src = "http://code.jquery.com/jquery-2.1.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
}
更改：
-
在
includejquery.js中，只需定义一个函数并等待被调用。
In
includejquery.js, just define a function and wait to be called.
让该函数接受回调。
让它等待脚本加载。
加载脚本后，调用 jQuery.noConflict 然后，如果有回调，请调用它并传递在 jQuery 函数中。
When the script is loaded, call jQuery.noConflict and then, if there's a callback, call it and pass in the jQuery function.
在HTML中，我正在调用函数，并接收参数它通过我 $ ，所以只在该函数中， $ === jQuery 即使在之外，它也没有（因为 noConflict ）。
In the HTML, I'm calling the function, and receiving the argument it passes me as $, so within that function only, $ === jQuery even though outside it, it doesn't (because of noConflict).
这篇关于如何使用纯javascript在任何网站中动态包含jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
