Question

我的问题类似于this one。但我觉得那里的答案是不完整的，问题以不确定的方式结束......

我正在为我的用户开发一个Javascript应用程序来放置他们的网站。我只希望他们必须在他们的网页顶部放置一个javascript include才能使用我的应用程序。

我的javascript需要运行jQuery。

所以目标是......

检查jQuery是否已加载。
加载jQuery（如果尚未加载）。
执行需要运行jQuery的javascript。

我想在同一个脚本中完成以上三个。

这是我最初尝试的......

function loa_j(){
 if (typeof jQuery === "undefined") {
 var newscript = document.createElement('script');
 newscript.type = 'text/javascript';
 newscript.async = true;
 newscript.src = 'http://code.jquery.com/jquery-latest.min.js';
 (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
 }
}

loa_j();
$(document).ready(function(){
//...Code That Never Fired
}

不有效，因为javascript不会等待加载jQuery。它确实加载了jQuery，但速度不够快。

这是我的另一个解决方案，这个解决了，但是我很想知道这是否真的是最好的方法......

function loa_j(){
if (typeof jQuery === "undefined") {
(function(a,b){function G(a){var b=F[a]={.... //Entire jQuery copy and pasted in :D
}
}

因此，通过将整个jQuery复制并粘贴到该函数中，代码实际上可以正常工作。

这真的是最好的方法吗？

Answer 1

您可以将onload事件添加到动态加载的脚本中，如下所示：

function loa_j(){
 if (typeof jQuery === "undefined") {
     var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'http://code.jquery.com/jquery-latest.min.js';
     newscript.onload = jqReady;  //<-- executed only after jquery is loaded
     (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body'[0]).appendChild(newscript);
  }
}

function jqReady(){
    // your jquery code here 
}

loa_j();

Answer 2

像这样编辑

$(document).ready(function(){
loa_j();
//...Code That Never Fired
}

Answer 3

在这种情况下，您必须使用计时器来检查库是否存在，然后执行您的代码。看到这个小提琴：

http://jsfiddle.net/pFaJc/

var callback = function(){
    $(document).ready(function(){
         console.log('jquery');
    });        
}

if( typeof jQuery === 'undefined' ){
    var scr = document.createElement('script');
    scr.src = 'http://code.jquery.com/jquery-latest.min.js';
    document.getElementsByTagName('head')[0].appendChild(scr);

    var timer = setInterval(function(){
        if( typeof jQuery !== 'undefined' ){
            clearInterval(timer);
            callback();
        }        
    },100);
}

Answer 4

你可以尝试这个，它基本上等待加载jquery，然后执行该函数。如果可以的话，它也可能是静态加载Jquery的好主意，因为它似乎依赖于$（document）.ready函数。但如果那不可能，你可以尝试这个，或者像yepnope.js或我最喜欢的requirejs那样尝试其他任何装载机。

http://jsfiddle.net/ytZRw/

在Javascript文件中加载和执行jQuery

4 个答案: