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

【问题标题】：Set script tag from API call in header of index.html在 index.html 的标头中设置 API 调用的脚本标记
【发布时间】：2018-02-13 17:12:19
【问题描述】：

我正在尝试在我的 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，但这也可以使用值来完成。如果有更好的方法请告诉我

【问题讨论】：

stackoverflow.com/a/14269615/3186873

标签： javascript html reactjs dynatrace

【解决方案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） - 您当前的方法非常好。

【讨论】：

在你的例子中，源代码只包含脚本标签的javascript代码，这是否适用于完整的脚本标签？因为这就是 api 调用返回它的方式。
@Kupi 所以你实际上只得到<script src="..." type="..."></script> 没有正文？
有不同的端点可供选择，您可以获取具有 src 属性的脚本或具有正文的脚本，但这些脚本上总会有一些重要的属性。现在我只选择给我一个没有正文，只有属性的脚本的那个。然后将它们复制到创建的元素中
感谢您的帮助，如果有人有更好的东西，我会让问题暂时保持开放。过一会我就关了

【解决方案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，但这也可以使用值来完成

【讨论】：