如何在v-html中运行脚本

Question

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

Answer 1

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

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

Answer 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
}

这可以轻松地复制到大多数嵌入库中，这些库使您可以“重新加载”页面上的所有小部件：

• 脸书 FB.XFBML.parse
• 推特 twttr.widgets.load
• Instagram instgrm.Embeds.process