如何在 VueJs 组件中对 oembed javascript 标记进行整数处理？

Posted 2023-02-23

【中文标题】如何在 VueJs 组件中对 oembed javascript 标记进行整数处理？

【英文标题】：How to integer an oembed javascript tag inside a VueJs component?

【发布时间】：2021-01-29 17:59:01

【问题描述】：

我有一个“嵌入”字段供用户使用，用于将简单链接转换为内容丰富的链接（包含图片、标题、描述等的链接）。

示例：

注意：我使用这个库来获取所有链接信息：oscarotero/Embed

如您所见，当您提供 url（例如 Twitter 推文）时，“code”参数包含 html 和脚本标签，以包含在我的前端：

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I am so hopelessly in love with <a href="https://twitter.com/ChucklefishLTD?ref_src=twsrc%5Etfw">@ChucklefishLTD</a> ‘s spooky logo <a href="https://twitter.com/TomJamesSlade/status/1315781356023173120">pic.twitter.com/2KtjCNOOUl</a></p>&mdash; Tom Slayed ???????? (@TomJamesSlade) <a href="https://twitter.com/TomJamesSlade/status/1315781356023173120?ref_src=twsrc%5Etfw">October 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

问题在于 VueJs 和 script 标签。当我的 ajax 调用正常时，我会像这样存储所有嵌入信息：

this.preview = response.embed

在我的组件中，我使用“v-html”VueJs 指令显示 html 代码

<div v-if="preview['code']" v-html="preview['code']"></div>

显示html：

脚本标签在代码检查器中可见：

但是脚本没有加载：

我对所有在响应中提供 javascript 标签的 oembed url 都有同样的问题。

注意：如果我尝试直接在组件内部加载脚本，VueJs 会返回此错误：

VueCompilerError: 在客户端组件模板中忽略带有副作用 ( 和 ) 的标签

google 上的一个解决方案是使用“mounted”事件，但它与我的上下文不兼容。 因为我必须加载的脚本是从 api 接收的，并且每次都可能不同，具体取决于链接。

【参考方案1】：

有点晚了，但这里有一个选项：该 api 使您可以不发送脚本标签，因此您可以自己将其包含在 html 之前。在 URL 中添加 omit_script=true，结果中就没有了。

然后您可以插入 twitter 块。也许你必须调用twttr.widgets.load() 来初始化推文。

编辑：由于您使用的是插件，这应该可以工作

$embed = new Embed();

$result = $embed->get('https://www.instagram.com/p/B_C0wheCa4V/');
$result->setSettings([
    'oembed:query_parameters' => ['omit_script' => true]
]);
$oembed = $info->getOEmbed();