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:

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?

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.

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).

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

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