Question

基本上我的网站上有一个script.js来执行此操作：

if (someVar){
   document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');
}

现在我想攻击一些行为：

if (someVar){
   document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');

  $(document).ready(function(){
     //> Do stuff
  });
}

但是我在控制台

中获得了未声明的函数$

Answer 1

document.write在调用脚本之后写入给定的字符串。如果要绑定到$(document).ready()，可以将这部分代码移动到单独的文件中，该文件包含在{ {1}}功能。

Answer 2

document.write不符合内容;也就是说，如果您使用它向页面添加<script>元素，它将不会等待该元素的内容在继续之前加载和执行。

如果您想动态加载带有回调的JavaScript库，那么我建议使用Request.js或类似的库，这样您就可以实现这样的目标：

require(["jquery"], function($) {
    $(function() {
        alert('ready');
    });
});

Answer 3

document.write实际上会覆盖您的文档来源。出于这个原因，你永远不应该使用它。

附加脚本标记的正确方法如下：

jqueryScript = document.createElement('script');
jqueryScript.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
document.body.appendChild(jqueryScript);
//do your jquery stuff

更多阅读为什么你永远不应该使用document.write：Why is document.write considered a "bad practice"?

Answer 4

外部脚本不会阻止代码，因此jquery不会立即可用。你需要这样做：

<script>
if (someVar){
   document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');
}
</script>
<script>
If  (someVar){
  $(document).ready(function(){
     //> Do stuff
  });
}
</script>

为什么document.write不等待加载？

4 个答案: