为什么脚本在一个站点的 Firebug 命令行中有效，但在另一个站点中却无效？

Question

我正在使用 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 命令行中运行此代码时，它 returns 出现以下错误：

TypeError: $(...).text() is not a function

当我运行这个代码站点 2 时它工作正常。它显示了网站上的大量文本。

有趣的是，如果我将 $ 更改为 jQuery，它也适用于站点 1。

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

Answer 1

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

比如-

$(document).ready(function(){

   // jQuery methods go here...

});

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

Answer 2

在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());
}());

Answer 3

当页面加载到站点 1 时，Firebug 的命令行内部已经使用了美元符号。如果页面自行设置 $ 变量，Firebug 将尝试使用该变量而不是它自己的 $ command，站点 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> 标签。

Answer 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();
    };
};

})();

为什么脚本在一个站点的 Firebug 命令行中有效，但在另一个站点中却无效？

Why does a script work in Firebug's command line on one site but not on another?

javascript

jquery

firebug