为什么脚本在一个站点上的 Firebug 命令行中可以工作，而在另一个站点上却不行？答案

【问题标题】：Why does a script work in Firebug's command line on one site but not on another?为什么脚本在一个站点上的 Firebug 命令行中可以工作，而在另一个站点上却不行？
【发布时间】：2015-04-24 03:30:16
【问题描述】：

我正在使用 Firefox 和 Firebug 的命令行在两个不同的站点上执行 JavaScript：

代码如下：

(function() {
   function r() {
       a = $("body").text()
       console.log(a);
   };
   var e = "1.6.4";
   var t = false;
   if (!t) {
       t = true;
       var n = document.createElement("script");
       n.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js";
       n.onload = function() {
           r();
       };

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

当我在站点 1 上的 Firebug 命令行中运行此代码时，它返回以下错误：

TypeError: $(...).text() 不是函数

当我运行此代码站点 2 时，它运行良好。它显示了来自网站的大量文本。

有趣的是，如果我将$ 更改为jQuery，它也可以在站点 1 上运行。

谁能告诉我发生了什么？为什么 Firebug 对这两个网站的行为不同？

【问题讨论】：

标签： javascript jquery firebug

【解决方案1】：

在站点 1 上加载页面时，Firebug 的命令行已经在内部使用了美元符号。如果页面自己设置了 $ 变量，Firebug 将尝试使用该变量而不是它自己的 @987654321 @，站点 2 就是这种情况。

为避免任何此类冲突，当您想要访问 jQuery 功能时，应在命令行中使用 jQuery 而不是 $。

您的代码将如下所示：

(function() {
  function r() {
    a = jQuery("pre").text();
    console.log(a);
    b = a.replace(/this is a nice car/g, "happy birthday");
    console.log(b);
  };
  var e = "1.6.4";
  var t = false;
  if (!t) {
    t = true;
    var n = document.createElement("script");
    n.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js";
    n.onload = function() {
      r();
    };

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

注意：上面的代码通过在发出请求之前检查t 变量来避免jQuery 的双重加载。并且删除了onreadystatechange 和readystate 的错误使用，因为它们仅适用于XmlHTTPRequests，不适用于附加的<script> 标签。

【讨论】：

请您回复已编辑的问题。它已使用您的代码进行了编辑。
我调整了我的答案以澄清关于您的两个网站的情况。请注意，不要将您的问题更改为其他问题，而应该打开另一个问题。

【解决方案2】：

尝试将您的 jquery 函数放在文档就绪事件中。

这样的-

$(document).ready(function(){

   // jQuery methods go here...

});

这是为了防止任何 jQuery 代码在文档完成加载（准备好）之前运行。

【讨论】：

我认为这不会有帮助。他正在从控制台运行代码，所以文档应该已经准备好了。

【解决方案3】：

console，试试

document.write("<html><body><pre>This is a nice car.</pre></body></html>");

(function jq() {

    function r() {
        var a = jQuery("pre").text();
        console.log(a);
        var b = a.replace(/this is a nice car/gi,"happy birthday");
        console.log(b);
    };
    var timeout;
    var check = window.jQuery;
    return !(check === undefined 
    ? (function() {
        callback = function() {
            timeout = setTimeout(function() {
              clearTimeout(timeout);
              timeout = null;
              return !!window.jQuery ? r() : callback()
        }, 1000);
        };
        var e = "1.6.4";
        var url = "https://ajax.googleapis.com/ajax/libs/jquery/" 
                  + e + "/jquery.min.js";
        var status = false;
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.type = "application/javascript";
        script.async = "async";
        script.id = "jq";      
        script.onload = callback;
        script.src = url;
        head.insertBefore(script, head.firstChild);
        console.log("loading "+ script.src + " at " + new Date().toJSON());
    }()) 
    : 
    r());
}());

【讨论】：

你的也可以，但你应该提到使用 jquery 而不是 $
@SanthoshYedidi 在console 和$("pre").text(); 尝试过？在var a = $("pre").text(); 中将$ 替换为jQuery，在r() 内不应返回不同的结果。当调用r() 时，$ 应定义为jQuery 的别名。在夜间使用 var a = $("pre").text(); 进行测试，似乎返回预期，结果与 var a = $("pre").text(); 相同。

【解决方案4】：

您的代码在 chrome 下适用于我。只需在事件注册前将脚本标签附加到头部即可。

更新：在 FireFox 37.0.2 上测试

只需将以下内容粘贴到FireFox标准开发工具的控制台中即可。

(function() {
function performAction() {

    console.log("perform action called");
    var $body = $("body");
    $body.empty();

    $body.append(
        $('<div id="jqHook"/>').append(
            $('<i/>').text("I like to drive cars"),
            $('<div/>').html('the above vehicle will be replaced in 3 seconds!')
        )
    );



    setTimeout(function(){

        var $iSentence = $("#jqHook i");
        var iSentenceTXT = $iSentence.text();

        var iSentenceTXT = iSentenceTXT.replace(/car/g, "<b>motorbike</b>");

        $iSentence.fadeOut(function(){
            $(this).html(iSentenceTXT).fadeIn(function(){
                console.log('modification performed !');
            });
        });

    },3000);

};
var e = "1.6.4";
var t = false;
var n = document.createElement("script");
n.src = "https://ajax.googleapis.com/ajax/libs/jquery/" + e + "/jquery.min.js";

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

n.onload = n.onreadystatechange = function() {
    if (!t && (!this.readyState || this.readyState == "loaded" ||   this.readyState == "complete")) {
        performAction();
    };
};

})();

【讨论】：