Question

要加载我的本地js库并运行警报命令。

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。在chrome的inspect--console中
没问题，弹出带有hellow world的窗口。

2。在firefox的控制台中。
遇到如下错误：

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

为什么代码片段无法在firefox的控制台中运行？

Answer 1

在将这些命令输入到控制台时，$不是jQuery-而是浏览器提供的 helper函数。与document.querySelector非常相似。请参阅docs，了解某些浏览器提供的内置帮助程序功能。

您可以看到Firefox $ 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);
  }
});

即使$是 jQuery，该行

$(document).ready(function(){

还不会引用jQuery，因为您只是插入了脚本-尚未下载和解析该脚本。因此，它仍将引用querySelector别名，并且

document.querySelector(document)

没有任何意义。

最好的解决方案是在插入的脚本上附加一个load处理程序，以便在加载jQuery后可以运行一个函数。例如：

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

一旦jQuery加载，它将确保window.$ now 指向jQuery而不是querySelector别名；稍后，以上代码段将记录true。

语法错误：“ [object HTMLDocument]”在Firefox中不是有效的选择器

1 个答案: