使用JavaScript将字符串附加到头部并执行_Javascript

使用JavaScript将字符串附加到头部并执行

javascript

使用JavaScript将字符串附加到头部并执行,javascript,Javascript,我有一个JS脚本，我正在使用它将字符串附加到head标记中，它可以工作，但它不执行附加的内容 HTML文件： <html> <head> ... <script src="test.js"></script> ... </head> <body> ... </body> </html> 有了这一点，我知道

我有一个JS脚本，我正在使用它将字符串附加到

head

标记中，它可以工作，但它不执行附加的内容

HTML

文件：

<html>
    <head>
        ...
        <script src="test.js"></script>
        ...
    </head>
    <body>
        ...
    </body>
</html>

有了这一点，我知道如果再次执行所有

head

只是为了执行附加的字符串（除非有一种方法只执行附加的字符串），它将进入递归，但我有一种方法来处理这个问题。首先，我需要它实际执行

我看到过其他类似的问题，但他们问我如何添加一个

脚本标记或类似的东西，我希望添加一整段HTML
，并让浏览器执行它
我正在寻找一个纯JavaScript解决方案
请注意，str
包含类似于JQuery
和Bootstrap
的内容，因此文档的其余部分严重依赖于首先发生的追加和执行。
通过innerHTML
插入脚本，insertAdjacentHTML（）
等等。不会运行它们。要做到这一点，我们必须更具创造性；请参阅内联注释：

setTimeout（（）=>{
康斯特街=
`
log（“来自脚本的你好”）
`;
//在文档外部创建一个元素以解析字符串
const head=document.createElement（“head”）；
//解析字符串
head.innerHTML=str；
//将这些节点复制到真正的“head”，复制脚本元素以便
//他们得到处理
让node=head.firstChild；
while（节点）{
const next=node.nextSibling；
如果（node.tagName==“脚本”）{
//仅仅附加这个元素不会运行它，我们必须创建一个新的副本
const newNode=document.createElement（“脚本”）；
if（node.src）{
newNode.src=node.src；
}
while（node.firstChild）{
//注意，我们必须克隆这些节点
appendChild（node.firstChild.cloneNode（true））；
node.removeChild（node.firstChild）；
}
node=newNode；
}
document.head.appendChild（节点）；
节点=下一个；
}
}, 800);
加载Bootstrap的CSS时，外观会发生变化
它可以工作，但只是有时。即使有一个超时（在使用JQuery的东西上），我偶尔也会得到一个错误，因为使用JQuery
的东西找不到它。而且超时解决方案也不是最好的，因为它很明显，一分钟内页面只显示文本，然后突然间所有内容都被设置好了样式和位置。你知道为什么会发生这种情况吗？-有时它可以找到JQuery
，有时它找不到？@sudoman：在这种情况下，您必须在每个脚本上钩住load
和error
事件（在设置src
之前），并等待附加后续节点，直到获得load
或error
回调。这不是小事，但也不难。@sudoman:同时监听错误和加载
，我会使用addEventListener
（虽然你可能不需要onload
和onerror
），但是是的。：-）再次确保在设置src
之前钩住事件，这很关键。@sudoman:这并不意味着什么，你只是钩住脚本元素上的一次性事件。
var str =
`
<script ... ></script>
<link...>
other stuff...
`

var html = document.getElementsByTagName('head')[0].innerHTML;
document.getElementsByTagName('head')[0].innerHTML=str+html;