通過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，但是也可以使用該值來完成