在 index.html 的 header 中设置来自 API 调用的脚本标记

Question

我正在尝试在我的 React 应用程序中实现 dynatrace，如果我只是在我的 index.html header.

中手动添加所需的脚本标签，这就可以正常工作

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

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

更新：

由于端点 returns 您 <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 的 header 中设置来自 API 调用的脚本标记

Set script tag from API call in header of index.html

html

javascript

reactjs

dynatrace