javascript - SyntaxError: '[object HTMLDocument]' är inte en giltig selektor i Firefox

Att ladda mitt lokala js-bibliotek och köra ett alert-kommando.

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.I Chromes inspektör--konsol
Popup-fönster med hellow world, inget problem.

2. i Firefoxs konsol.
Det stöter på ett fel enligt nedan:

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

Varför kan inte kodsnutten köras i Firefoxs konsol?

Svar #1

Vid den tidpunkt då dessa kommandon matas in i konsolen är $ inte jQuery - det är snarare en hjälpfunktion som tillhandahålls av webbläsaren och som är mycket lik document.querySelector. Se dokumentationen om de inbyggda hjälpfunktioner som finns tillgängliga i vissa webbläsare.

Du kan se källkoden för Firefox $ här:

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

Även om $ vore jQuery, raden

$(document).ready(function(){

skulle inte hänvisa till jQuery ännu, eftersom du just har infogat skriptet - det har nödvändigtvis inte hämtats och tolkats än. Så det kommer fortfarande att hänvisa till querySelector-aliaset, och

document.querySelector(document)

har ingen mening.

Den bästa lösningen skulle vara att bifoga en load-hanterare till det infogade skriptet, så att du kan köra en funktion när jQuery har laddats. Till exempel:

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

När jQuery har laddats kommer det att säkerställa att window.$ nu pekar på jQuery istället för querySelector-aliaset; utdraget ovan kommer att logga true efter en stund.