Question

我正在使用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（）语句。浏览器控制台说：＆＃34;从异步加载的外部脚本调用document.write（）被忽略。＆＃34;

无论如何要实现这个目标吗？

Answer 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将被加载，您可以在不插入其他脚本标记的情况下使用它。

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

1 个答案: