1

我正在尝试在我的反应应用程序中实现 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，但这也可以使用该值来完成。如果有任何更好的方法可以做到这一点，请告诉我

4

2 回答 2

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（在浏览器内存中表示文件或 Blob 对象）。该解决方案基于动态添加<script>由浏览器评估以防它具有src属性的想法。

更新：

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

于 2018-02-05T13:31:50.540 回答
0

我找到了一种迂回的方法：

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 但这也可以使用值来完成

于 2018-02-13T09:12:19.543 回答