Question

我试图在我的反应应用程序中实现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，以便创建Object 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，但这也可以用值来完成

在index.html的标头中设置API调用的脚本标记

2 个答案: