通过 jQuery 添加的脚本标签在 FireBug 中不可见答案

【问题标题】：Script tags added via jQuery not visible in FireBug通过 jQuery 添加的脚本标签在 FireBug 中不可见
【发布时间】：2011-03-05 18:33:34
【问题描述】：

我通过 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 检查文档头时，我看不到头中的脚本。这个 sn-p 也不显示添加的脚本：

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

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

更新

替换代码：

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

到

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

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

【问题讨论】：

我相信这是正常的。 Firebug 说“警告。页面加载期间脚本面板处于非活动状态 - 重新加载以查看所有源”。这表明只能调试页面加载时可用的脚本。
一个 jQuery 大师能否验证通过 $.append 方法添加的 <script> 没有物理添加到 DOM 中，而只是 eval uated？
你为什么不使用 $.getScript() ？ api.jquery.com/jQuery.getScript
我认为默认情况下$.getScript 会尝试避免浏览器缓存，在这种特殊情况下我不希望这样做。
试试$(document.head).append(s);。

标签： javascript jquery debugging firebug

【解决方案1】：

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

【讨论】：

这是否意味着jQuery也不能选择脚本标签？

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

好的，我在 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 中。

【讨论】：

【解决方案4】：

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

【讨论】：

我的错误，我在想用 Firebug 在 Firefox 中“检查元素”。我现在在带有幻灯片的页面上对其进行测试，每次幻灯片转换时，萤火虫都会更新 HTML 选项卡以显示当前 DOM，并突出显示修改后的元素 ~1s