我想从 Google CDN 使用 jQuery,并且我还想实施一个后备策略,以防 jQuery 无法从 Google 加载。当然,我知道一个很好的解决方案,它总是对我有用并且仍然有效:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>
<!-- fallback: load local jq -->
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='/js/jquery/jquery-1.7.2.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
alert(jQuery); // something != undefined => works as expected
</script>
</head>
<body></body>
</html>
现在我想知道为什么这在这里不起作用:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>
<!-- fallback: load local jq -->
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/jquery/jquery-1.7.2.js';
//this seems not to work :-(
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<script type="text/javascript">
alert(jQuery); // undefined => but why????????
</script>
</head>
<body></body>
</html>
我知道问题在于,如果我使用 document.createElement('script') 然后将刚刚创建的脚本元素添加到通过 DOM 操作(没有 document.write() ),新元素确实添加到了 DOM,但此时它还没有加载和执行。相反,它会在稍后的某个时间执行。但我真的希望头部中的任何脚本标签都被同步加载和执行。这似乎不适用于我上面描述的情况。
但另一方面,第一个例子工作得很好——所以 document.write() 似乎符合我的预期——但为什么呢?