在IE和Chrome中动态加载jQuery [英] Dynamically load jQuery in IE and Chrome

问题描述

我正在创建一个使用jQuery的外部小部件，而不是让用户单独包含它。我想检查它是否被加载，如果不是，它会动态加载。

问题是我需要等到它被加载才能执行脚本的其余部分，这需要IE和FF / Chrome处理不同的事件处理程序。

如果我这样做，它在IE8中工作正常：

 < div id =test> 
< p>这是一项测试。< / p> 
< / div> 
 
< script> 
 if（typeof jQuery =='undefined'）{
 s = document.createElement（script）; 
 s.src =//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js; 
 if（s.addEventListener）{
 s.addEventListener（load，runScript，false）; 
} else if（s.readyState）{
 s.onreadystatechange = runScript; 
} 
 
} else {
 runScript（）; 
 
 
 function runScript（）{
 document.getElementsByTagName（'head'）[0] .appendChild（s）; 
 $（'＃test'）。css（'font-size'，'50px'）; 
 
} 
< / script> 
  

但这在Chrome中不起作用。但是，如果我之前添加脚本，它可以在Chrome中运行，但不能用于IE：

 < div id =test> 
< p>这是一项测试。< / p> 
< / div> 
 
< script> 
 if（typeof jQuery =='undefined'）{
 s = document.createElement（script）; 
 s.src =//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js; 
 document.getElementsByTagName（'head'）[0] .appendChild（s）; 
 if（s.addEventListener）{
 s.addEventListener（load，runScript，false）; 
} else if（s.readyState）{
 s.onreadystatechange = runScript; 
} 
 
} else {
 runScript（）; 
 
 
 function runScript（）{
 
 $（'＃test'）。css（'font-size'，'50px'）; 
 
} 
< / script> 
  

关于如何动态加载jQuery和事件处理程序的任何想法都可以在IE和Chrome中使用？ p>

编辑：将appendChild目标从测试更改为头部。 在第一个代码中，您将在完成时调用的函数中附加脚本！

测试的元素是什么？

  document.getElementsByTagName（'test'）[0] .appendChild（s）; <  - 寻找元素
< div id =test> <  -  test is a id 
  

代码应该像

  if（typeof jQuery =='undefined'）{
 var s = document.createElement（script）; 
 s.src =//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js; 
 if（s.addEventListener）{
 s.addEventListener（load，runScript，false）; 
} else if（s.readyState）{
 s.onreadystatechange = runScript; 
 
 document.getElementsByTagName（'head'）[0] .appendChild（s）; 
} else {
 runScript（）; 
 
 
函数runScript（）{
 $（'＃test'）。css（'font-size'，'50px'）; 
} 
  

运行示例： http://jsfiddle.net/5986T/

I'm creating an external widget that uses jQuery and rather than have the user include it separately I'd like to check to see if it's loaded and load it dynamically if it's not.

Problem is I need to wait until it's loaded to execute the rest of the script, which requires event handlers that IE and FF/Chrome handle differently.

If I do this, it works fine in IE8:

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {
    document.getElementsByTagName('head')[0].appendChild(s);
    $('#test').css('font-size', '50px');

}
</script>

But that doesn't work in Chrome. However if I append the script earlier, it works in Chrome but not IE:

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(s);
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {

    $('#test').css('font-size', '50px');

}
</script>

Any ideas on how to dynamically load jQuery with event handlers that works both in IE and Chrome?

EDIT: Changed appendChild target from test to head.

解决方案

In the first code you are appending the script in the function you are calling when it is complete!

And what element is test?

document.getElementsByTagName('test')[0].appendChild(s);  <-- looking for element
<div id="test">  <-- test is an id

The code should look like

if (typeof jQuery == 'undefined') {
    var s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }
    document.getElementsByTagName('head')[0].appendChild(s);
} else {
    runScript();
}

function runScript() {
    $('#test').css('font-size', '50px');
}

Running example: http://jsfiddle.net/5986T/

这篇关于在IE和Chrome中动态加载jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！