Vuejs 2：如何在 DOM 中动态包含（和运行）脚本标记 javascript 文件？答案

【问题标题】：Vuejs 2: How to include (and run) a script tag javascript file in the DOM dynamically?Vuejs 2：如何在 DOM 中动态包含（和运行）脚本标记 javascript 文件？
【发布时间】：2018-05-25 20:33:17
【问题描述】：

我正在使用 Vuejs，我需要在 DOM 中动态插入脚本标签，以便以这种方式嵌入 JWPlayer 视频：

<body>
 <!-- HTML content -->
 <script src="//content.jwplatform.com/players/KZVKrkFS-RcvCLj33.js"></script>
 <!-- More HTML content -->
 <script src="//content.jwplatform.com/players/ANOTHER-ID-ANOTHER-PLAYERID.js"></script>
</body>

我使用了没有结果的：v-html 指令来呈现 html 标签。 v-bind:src 也一样，但都不执行代码。我找到了这个解决方案，但它也不起作用：How to add external JS scripts to VueJS Components

我使用了这个解决方案，但是脚本标签（每个视频一个）必须插入正文中（而不是头部）：它们应该创建 div 标签容器并嵌入视频。问题是嵌入的 JWPlayer 文件包含一个 document.write() 语句。浏览器控制台显示：“从异步加载的外部脚本调用 document.write() 被忽略。”

有没有办法做到这一点？

【问题讨论】：

那么，您链接的方法出了什么问题？这似乎是明智的。
我也无法在 vue.js 中可靠地加载 jwplayer

标签： html ajax vue.js vuejs2 jwplayer

【解决方案1】：

您提供的链接应该可以使用。

您可能只需要等待脚本加载即可使用 JWPlayer。

const script = document.createElement('script')

script.onload = () => {
  // Now you can use JWPlayer in here
}

script.src = '//content.jwplatform.com/players/MEDIAID-PLAYERID.js'
document.head.appendChild(script)

同时确保你只对第一个需要它的组件执行一次，从那时起 JWPlayer 将被加载，你可以在不插入另一个脚本标签的情况下使用它。

【讨论】：

把它放在 index.html 中怎么样？