如何在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

Answer 3

在Nuxt3我确实是这样的

const srcRegex = /<script\b[^>]*\bsrc=["']([^"']*)["'][^>]*>/gi;
const scripts = [];
let match;
while((match = srcRegex.exec(props.media.customcode)) !== null) {
    scripts.push({
        src: match[1],
        async: true,
        defer: true,
        type: 'text/javascript'
    });
}
const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/gi;
const cleanedCustomCode = props.media.customcode.replace(scriptRegex, '');

useHead({
    script: scripts
})

其中

props.media.customcode

是嵌入（可以是 twitter、instagram 等等...）