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

问题描述

以下将 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。

第二次运行成功。

---

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

解决方法

通常是这样的：

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

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