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 =＆＃39; https://secure.na1.echosign.com/public/embeddedWidget？ `wid = CBFCIBAA3AAABLblqZhBU33GaMRZ2lMelHKzti7RkanxMP5v-uW_f8CEiKoopNNofJWyXhmE56Su3HTbY *＆amp; token = CBNCKBAAHBCAABAARNiZ7Yba0h7dnLaQRBAdTdH9UrJZKryP＆＃39; /＆GT;

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

Answer 1

我建议您调整此答案中提供的解决方案：Use JS variable to set the src attribute for <script> tag。

在您的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);
 }

Aurelia视图中的脚本标记未执行

1 个答案: