通过index.html头中的API调用设置脚本标签

Question

我正在尝试在我的react应用程序中实现dynatrace，并且如果我只是在index.html标头中手动添加所需的脚本标记，则此方法会很好地工作。

但是我想使用dynatraces api，它返回整个脚本标签元素（因此我可以用于不同的环境）。

调用api后如何将脚本标签添加到index.html？ 从代码创建脚本元素将不起作用，因为api调用的响应本身就是脚本标记（作为字符串返回）。

我尝试创建div元素并将脚本添加为innerHtml，然后将其附加到文档中。 但是脚本不会在innerHtml文本中执行。

const wrapperDiv = document.createElement("div");
wrapperDiv.innerHTML = "<script>alert('simple test')</script>";
document.head.appendChild(wrapperDiv.firstElementChild);

能做到吗？

我发现了一种回旋方式：

const wrapperDiv = document.createElement("div");
const scriptElement = document.createElement("script");
wrapperDiv.innerHTML = "<script src=... type=...></script>";
for(let i = 0; i < wrapperDiv.firstElementChild.attributes.length; i++){
    const attr = wrapperDiv.firstElementChild.attributes[i];
    scriptElement.setAttribute(attr.name, attr.value);
}
document.head.appendChild(scriptElement);

在此脚本示例中，我仅使用src，但这也可以使用该值来完成。 如果有更好的方法可以做到这一点，请告诉我

Answer 1

这可以在不使用eval()情况下实现：

const source = "alert('simple test')";
const wrapperScript = document.createElement("script");
wrapperScript.src = URL.createObjectURL(new Blob([source], { type: 'text/javascript' }));
document.head.appendChild(wrapperScript);

在上面的代码中，您基本上创建了包含脚本的Blob，以便创建对象URL（浏览器内存中File或Blob对象的表示形式）。 此解决方案基于以下想法：如果动态添加的<script>具有src属性，则浏览器会对其进行评估。

更新：

由于端点返回具有一些有用属性的<script>标记，因此最好的解决方案是克隆属性（包括src ）-您当前的方法非常好。

Answer 2

我发现了一种回旋方式：

const wrapperDiv = document.createElement（“ div”）;

const scriptElement = document.createElement("script");
wrapperDiv.innerHTML = "<script src=... type=...></script>";
for(let i = 0; i < wrapperDiv.firstElementChild.attributes.length; i++){
    const attr = wrapperDiv.firstElementChild.attributes[i];
    scriptElement.setAttribute(attr.name, attr.value);
}
document.head.appendChild(scriptElement);

在此脚本示例中，我仅使用src，但是也可以使用该值来完成