Javascript 我如何在HTML模板中在覆盖页面上注入脚本？（导入jQuery）

显然，HTML模板中的脚本只在HTML模板本身中工作，而不在HTML模板注入的页面中工作。（脚本仍在执行，但它们依赖于jQuery，即使它比其他脚本先导入，也会抛出错误。）

下面是我的代码：

功能文件（名称）{
var元素=document.documentElement；
对于（var i=element.attributes.length-1；i>=0；i--）{
element.removeAttribute（element.attributes[i].name）；
}
对于（var i=0；i

本规范适用于以下情况：

基本上，它所做的是清除文档，然后使用XMLHttpRequest将扩展中的HTML模板注入页面。但是，HTML模板中的所有脚本都需要jQuery，并且当访问覆盖的页面（pbskids.org/wildkratts/）时，由于未捕获错误（即未捕获引用错误：$未定义），这些脚本无法完全工作，如果导入jQuery，这些错误将得到解决

然后我访问了HTML模板URL本身，你知道吗，脚本实际上执行起来没有问题

以下是我的脚本标记在HTML模板中的顺序：

window.jQuery | | document.write（“”）

---

我想让脚本在覆盖页面本身而不是HTML模板上正确工作。我想我可以让它重定向到HTML模板，但我真的不想这样做。

当通过appendChild或类似的DOM方法单独添加脚本元素时，带有

src

的每个脚本都是异步运行的，即它不会等待上一个脚本，所以它可以在jQuery运行之前运行。解决方案是在运行下一个脚本之前等待

load

事件：

异步函数insertAndExecute（）{
for（document.querySelectorAll（'script'）的常量）{
const copy=document.createElement（'script'）；
copy.textContent=orig.textContent；
copy.src=orig.src；
原件替换为（副本）；
if（copy.src）{
等待新的承诺（resolve=>copy.addEventListener（'load'，resolve，{once:true}））；
}
}
}

脚本标记不会通过innerHTML执行，这是HTML/DOM规范的预期行为。不要这样做，因为这样的脚本将在不安全的页面上下文中运行（假设您使用appendChild手动重新添加它们），而是添加一个指向扩展名中html文件的iframe。@wOxxOm我还有一个额外的函数强制它们执行，但它总是抛出错误，因为它们依赖于jQuery，这是在其他人之前定义的，但不管他们似乎没有联系或什么。即使执行了jQuery脚本，它似乎也不会导入，其他JS文件也不会执行。哦，好吧。我想我得用一个iframe。好吧，你没有显示一个完整的，所以我得猜会发生什么。您是否通过可访问的web资源正确公开了这些脚本？哪个脚本显示“$未定义”？另外，为什么要在一行中加载jquery 4次？请注意，当手动添加脚本标记时，脚本是异步运行的，因此您必须在脚本的

onload

处理程序中使用jQuery/$@我更新了问题。是的，我在网络资源下注册了这些脚本。除了jQuery脚本之外，更新的MCVE中的所有脚本都会抛出“$is not defined”。我加载了四次jQuery，因为内联脚本要求编写一个新脚本。我将内联标记中的脚本标记放入它自己的标记中，以强制执行它，并将内联标记保留在那里以保留原始文档。我用一个本地jQuery库加载了jQuery，因为它无论如何都会被加载，我保留了ajax.googleapis.com库来保存原始文档。是的，所以问题是当手动添加脚本标记时，该脚本正在异步运行，因此您必须将使用该脚本的代码放入onload处理程序中。它不做任何事情。它肯定做了我测试中应该做的事情。您可以显示“测试”的代码吗？如果它对您不起作用，那么您可能在编辑后没有重新加载扩展，或者您使用的是一个古老的Chrome没有替代品。无论如何，打开devtools，在代码中设置一个断点，然后查看h