Aurelia視圖中的腳本標簽未執行

Question

我在一個簡單的aurelia視圖中添加了一個簡單的腳本塊：

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

即使視圖正確呈現，該腳本也永遠不會運行，並且我可以看到腳本塊確實出現在DOM中。

我還嘗試通過viewModel動態插入腳本塊，並嘗試：

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

我知道這樣做並非最佳做法，但我正在嘗試集成第三方小部件，然后再渲染iframe。 上面顯示的警報只是驗證我所看到的問題的一種簡單方法。

現實生活場景如下：

• 我從視圖模型向第三方進行api調用。

• 返回以下內容：

  <script type='text/javascript' language='JavaScript' =' https://secure.na1.echosign.com/public/embeddedWidget嗎？ `wid = CBFCIBAA3AAABLblqZhBU33GaMRZ2lMelHKzti7RkanxMP5v- uW_f8CEiKoopNNofJWyXhmE56Su3HTbY *＆token = CBNCKBAAHBCAABAARNiZ7Yba0h7dnLaQRBAdTdH9UrJZKry

我需要將此附加到DOM並執行。 我正在通過fetch調用上述url來解決此問題，然后執行響應，但這似乎是一種乏味/駭人的方式。

Answer 1

我建議采用此答案中提供的解決方案： 使用JS變量為<script>標簽設置src屬性 。

在VM的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方法卸載組件時將其從head元素中刪除。

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