SyntaxError：'[object HTMLDocument]'不是firefox中的有效选择器

Question

To load my local js lib and run an alert command.

var jq = document.createElement('script');
jq.src = "http://127.0.0.1/js/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
$(document).ready(function(){
alert("hello world");
});

1.In chrome's inspect--console
Pop up a window with hellow world ,no problem.

2.in firefox's console.
It run into an error as below:

SyntaxError: '[object HTMLDocument]' is not a valid selector

Why the code snippet can't run in firefox's console?

Answer 1

At the time that those commands are entered into the console, $ is not jQuery - rather, it is a helper function provided by the browser that is very similar to document.querySelector . See docs on the built-in helper functions available on some browsers.

You can see the source for Firefox's $ here :

WebConsoleCommands._registerOriginal("$", function(owner, selector) {
  try {
    return owner.window.document.querySelector(selector);
  } catch (err) {
    // Throw an error like `err` but that belongs to `owner.window`.
    throw new owner.window.DOMException(err.message, err.name);
  }
});

Even if $ were jQuery, the line

$(document).ready(function(){

wouldn't refer to jQuery yet, because you only just inserted the script - it hasn't necessarily been downloaded and parsed yet. So, it'll still refer to the querySelector alias, and

document.querySelector(document)

doesn't make any sense.

The best solution would be to attach a load handler to the inserted script, so that you can run a function once jQuery is loaded. For example:

const jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js";
document.head.appendChild(jq);
jq.addEventListener('load', () => {
  console.log("hello world");
  console.log($ === jQuery);
});

Once jQuery loads, it will ensure that window.$ now points to jQuery rather than the querySelector alias; the above snippet will log true after a moment.