Question

我通过jQuery将<script type="text/javascript" src="http://somedomain/somescript.js">添加到文档头。这是我使用的代码：

$(document).ready(function () {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = (document.location.protocol == "https:" ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
    $("head").append(s);
});

虽然脚本似乎运行得很好，但是当我使用FireBug检查文档头时，我看不到头部中的脚本。此代码段不会显示添加的脚本：

$('script[src]').each(function(){
    console.log(this.src);
});

这是正常还是我在这里做错了什么？令我困扰的是，我在head部分看到其他脚本是懒惰/动态加载但不是我添加的脚本。还想知道在文档就绪函数中加载操作DOM的脚本是否可以。

更新

替换代码：

$("head").append(s);

到

document.getElementsByTagName("head")[0].appendChild(s);

解决了这个问题。生成的DOM在FireBug中正确显示，jQuery正确返回静态/动态添加的脚本标记。

Answer 1

您会在NET标签中看到对脚本发出的请求，但在检查DOM时，script标记将不可见。这似乎是FireBug中的bug。

Answer 2

好的，我在jQuery.com上找到了this tip：

> It should be noted that any attempts to append script elements using this
> method will fail silently:
> $('#element').append("<script></script>");

>> Not exactly. Scripts will be evaluated first, and then discarded.
>> So, if you do this:
>> $('#element').append("<script>alert('hello');</script>");
>> You'll see the alert.

这可能意味着脚本已经过评估但未插入DOM中。

Answer 3

这是Mozilla的'jsd'调试器支持中的一个错误。一个解决方法是发布上面引用的bug：

http://code.google.com/p/fbug/issues/detail?id=1774

如果jquery使用eval（）而不是脚本标记注入，那么你可以在Firebug中调试它。

Answer 4

~~使用右键单击“Inspect Element”选项在Chrome中测试~~以使用完整的调试器（查看源代码不会显示脚本的修改）。元素 HTML选项卡应显示DOM的实时更改

通过jQuery添加的脚本标记在FireBug中不可见

更新

4 个答案: