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

问题

I am using Firefox and Firebug's command line to execute a JavaScript on two different sites:

https://graph.facebook.com/v2.3/172727819415642/albums?fields=id,name,cover_photo,photos%7Bname,source%7D&limit=1&access_token=xxxxx
http://www.iskcondesiretree.com/photo/album/list

Here's the code:

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

When I run this code in Firebug's command line on site 1, it returns the following error:

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

When I run this code site 2 it works fine. It shows lot of text from the site.

Interesting thing is, if I change $ to jQuery it works on site 1, too.

Can anyone tell what's happening? Why Firebug behaves differently for those two sites?

回答1:

The dollar sign is already used internally by Firebug's command line at the time the page is loaded on site 1. If the page sets the $ variable by itself, Firebug will try to use that variable instead of its own $ command, which is the case on site 2.

To avoid any such conflicts you should use jQuery instead of $ within the command line when you want to access the jQuery functionality.

Your code will then look like this:

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

Note: The code above avoids double loading of jQuery by checking the t variable before the request is made. And the incorrect use of onreadystatechange and readystate were removed, because they are only available for XmlHTTPRequests, not for appended <script> tags.

回答2:

Try to put your jquery function inside the document ready event.

such like-

$(document).ready(function(){

   // jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

回答3:

At console , try

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

回答4:

your code works for me under chrome. Just append the script tag to the head before the event registration.

updated: tested on FireFox 37.0.2

Just paste the below content in the console of the standard development tool of 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();
    };
};

})();

来源：https://stackoverflow.com/questions/29805800/why-does-a-script-work-in-firebugs-command-line-on-one-site-but-not-on-another

标签

javascript

jquery

firebug