如何在 v-html 中运行脚本答案

【问题标题】：How to run script in v-html如何在 v-html 中运行脚本
【发布时间】：2017-06-16 18:19:26
【问题描述】：

我从数据库中获取嵌入代码（Instagram、Twitter 等）。如何将它们绑定到 vue 组件？有什么方法可以在 v-html 中执行脚本标签吗？

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

简短的回答：你不能。 dom 加载后，您的浏览器会阻止脚本标签的执行。

长答案：您可以尝试匹配脚本的 src 属性并获取 + 评估它，或者匹配 div 的内部内容并评估它，但不建议这样做。

【讨论】：

感谢您的回答！据我了解，v-html 使用不执行脚本标签的 innerHTML。但是有一些解决方法stackoverflow.com/questions/1197575/…
这是eval方案，需要你匹配一个脚本的内部内容。我仍然强烈建议您避免使用此解决方法并找到更好的解决方案

【解决方案2】：

为了标题，浏览器会屏蔽你。

但是，出于问题的目的，您可以轻松预测/列出您想要支持的嵌入代码，因此您可以这样做：

if (window.twttr) {
  // The script is already loaded, so just reload the embeds
  window.twttr.widgets.load();
} else if (!document.getElementByID('twttr-widgets')) {
  const embed = document.createElement('script');
  embed.id = 'twttr-widgets'
  embed.src = 'https://platform.twitter.com/widgets.js';
  document.body.appendChild(embed);
  // And when the script loads, the embeds will load too
}

对于大多数允许您“重新加载”页面上所有小部件的嵌入库，这可以很容易地复制：

FacebookFB.XFBML.parse
Twittertwttr.widgets.load
Instagraminstgrm.Embeds.process

【讨论】：