腳本標籤不執行

Question

我加入一個簡單的腳本塊，以一個簡單的奧裏利亞觀點：

<template> 
    <script type="text/javascript"> 
    alert('Hello!'); 
    </script> 
</template> 

腳本永遠不會運行，即使觀點正確渲染，我可以看到，該腳本塊確實出現在DOM中。

我也試圖通過動態視圖模型插入腳本塊，也有嘗試：

<script type="text/javascript" src="http://blah"></script> 

我知道這是不是這樣做的最佳實踐，但我試圖整合第三方小工具，然後將呈現一個iframe。上面顯示的警報只是驗證我看到的問題的一種簡單方法。

的現實生活場景如下：

• 透過我的視圖模型API調用第三方。

• 下面返回：

  <script type='text/javascript' language='JavaScript' SRC =」 https://secure.na1.echosign.com/public/embeddedWidget？ `婦女參與發展= CBFCIBAA3AAABLblqZhBU33GaMRZ2lMelHKzti7RkanxMP5v- uW_f8CEiKoopNNofJWyXhmE56Su3HTbY * &標記= CBNCKBAAHBCAABAARNiZ7Yba0h7dnLaQRBAdTdH9UrJZKryP」 />

我需要追加此對DOM並使其執行。我正在通過fetch調用上面的URL來解決這個問題，然後我執行響應，但它看起來像是一種單調乏味的/冒險的方式。

Answer 1

我會建議使用此答案中提供的解決方案：Use JS variable to set the src attribute for <script> tag。

在你的虛擬機的bind或attached方法（很可能）：

let scriptURL = api.getURL(); 

let scriptElement = document.createElement('script'); 

scriptElement.src = scriptURL; 
scriptElement.onload =() => { 
    // do anything you need to do here, or call a VM method 
    this.someVMMethod(); 
}; 

this.scriptElementInHead = document.querySelector('head').appendChild(scriptElement); 

如果需要的話，你甚至可以通過保持對它的引用，並從頭部元素中取出時，該組件刪除腳本元素在unbind或detached方法中被卸載。

detached() { 
    document.querySelector('head').removeChild(this.scriptElementInHead); 
}