如何使用纯javascript在任何网站中动态包含jQuery
我试图动态地包含jquery，我使用了以下代码 –
的index.php
$(document).ready(function(){ $('#testing').html('This is a paragraph!
'); }); 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(); }
但jqueryfunction不起作用它不打印段落标签:-(请帮帮我。提前谢谢
这是行不通的，因为你的$(document).ready(...行在jQuery加载之前运行，所以它失败了，因为$是未定义的（抛出一个ReferenceError ）或者它引用的不是jQuery。而且，你正在调用加载jQuery之前的jQuery.noConflict() ，如果该调用确实有效，那就意味着$根本不再引用jQuery，所以$(document).ready(...仍然无效。
在任何现代浏览器中，您可以在要添加的script元素上使用load事件，这会告诉您脚本已加载。 可能最好将回调传递给你对includejquery.js的调用，如下所示：
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，只需定义一个函数并等待调用。 -
让该函数接受回调。
-
让它等待脚本加载。
-
加载脚本时，调用
jQuery.noConflict然后，如果有回调，则调用它并传入jQuery函数。 -
在HTML中，我正在调用函数，并接收它作为
$传递给我的参数，因此只在该函数中 ，$ === jQuery即使在它之外 ，它也没有（因为noConflict）。
HTML5-Boilerplate的实现有什么问题？
替代解决方案
(function () { initScript().then(function (v) { console.info(v); var script = document.getElementById("__jquery"); script.onload = function () { $(document).ready(function () { // Main logic goes here. $("body").css("background-color","gray"); }); }; }); function initScript() { promise = new Promise(function(resolve,reject) { try { if(typeof jQuery == 'undefined') { console.warn("jQuery doesn't exists"); var jQuery_script = document.createElement("script"); jQuery_script.src = "https://code.jquery.com/jquery-2.2.4.min.js"; jQuery_script.type = 'text/javascript'; jQuery_script.id = "__jquery"; document.head.appendChild(jQuery_script); resolve("jQuery added succesfully."); } resolve("jQuery exists.") } catch (ex) { reject("Something went wrong on initScript() : ", ex); } }); return promise; } })();
我使用了promise，因为如果页面中没有jQuery，我们需要先等待加载它。
由于脚本加载异步，因此.ready不会触发。
这应该首先在页面上运行并阻止所有其他脚本，以便按时加载依赖项。
附加到身体：
function loadScript() { var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'http://www.mydomain/myscript.js'; script.async = true; document.body.appendChild(script); }
附加头：
function loadScript() { var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'http://www.mydomain/myscript.js'; script.async = true; head.appendChild(script); }
通常当您包含一些脚本时，浏览器将逐步同步加载它们。
但是，如果你设置
script.async = true;
脚本将异步加载，其他脚本不会等待它们。 要解决此问题，您可以删除此选项。
脚本上有一个onload事件。 用那个。
检查你的浏览器js控制台。 您可能会看到$ is undefined and not a function 。 这是因为你正在运行代码
您可以尝试将要运行的jquery代码包装在script标记的readyStateChange事件中。 或者您可以使用require.js 。
有一个工作演示http://jsbin.com/lepapu/2/edit （点击“用JS运行”）
脚本的顺序很重要。