在 Chrome DevTools 中依次注入和 运行 jQuery

Question

以下将 jQuery 注入 Chrome 开发者工具。

jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type
jQuery.noConflict();

---

虽然效果很好，但我的目标是在之后顺序 运行 jQuery 而不必分开代码。

我试过：

setTimeout(function(){
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
}, 2000);
jQuery.noConflict();

结果：未捕获的引用错误：jQuery 未定义。

运行第二次就成功了

---

也就是说，我的下一次尝试是：

setTimeout(function(){
setTimeout(function(){
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
}, 1000);
jQuery.noConflict();
}, 2000);

结果：未捕获的引用错误：jQuery 未定义。

运行第二次就成功了

---

我该怎么做才能使延迟生效？

Answer 1

通常是这样的：

const jq = document.createElement('script');
jq.onload = () => {
  jQuery.noConflict();
};
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.head.appendChild(jq);

在设置 .src 之前设置 .onload（或者您想要设置 load 事件处理程序），因为某些浏览器实际上不需要 script 作为一部分文档的一部分，将在设置 .src 后立即加载。