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'src =' https://secure.na1.echosign.com/public/embeddedWidget？`妇女参与发展= CBFCIBAA3AAABLblqZhBU33GaMRZ2lMelHKzti7RkanxMP5v- uW_f8CEiKoopNNofJWyXhmE56Su3HTbY*标记= CBNCKBAAHBCAABAARNiZ7Yba0h7dnLaQRBAdTdH9UrJZKryP" />

我需要将它附加到DOM并让它执行.我正在解决这个问题,通过fetch调用上面的url,然后我执行响应,但这似乎是一个单调乏味的hacky方式.

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);

如果需要,您甚至可以通过保留对它的引用来删除脚本元素,并在unbindor或detached方法中卸载组件时将其从head元素中删除.

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