如何设置已经“嵌入”到 HTML 中的 <a> 标签的“target”属性？答案

【问题标题】：How can I set the "target" attribute of <a> tags which are already "embedded" into HTML?如何设置已经“嵌入”到 HTML 中的 <a> 标签的“target”属性？
【发布时间】：2020-01-02 22:52:50
【问题描述】：

我正在使用 VueJS 和 Kentico Kontent 作为 CMS 开发一个网站。此 CMS 提供“富文本”功能，基本上允许文本内容嵌入链接和基本格式，通过 API 提供时会自动转换为 HTML。

使用v-html 指令显示HTML 内容没有问题，但我想不出一种方法将内部<a> 标记的属性设置为_blank，以便嵌入的链接在打开新窗口时打开新窗口点击。

有什么优雅的方法可以做到这一点，而不必从前端解析 HTML？

【问题讨论】：

标签： html vue.js kentico vue-directives kentico-kontent

【解决方案1】：

你可以创建一个指令：

Vue.directive('links-in-new-window', {
  inserted: function(el) {
    const anchors = el.querySelectorAll('a')

    anchors.forEach((anchor) => anchor.target = "_blank")
  }

})

只需将其应用于您使用 v-html 的同一元素：

<div class="content" v-html="content" v-links-in-new-window></div>

【讨论】：

【解决方案2】：

在 vue V3 中，指令如下所示：

app.directive('links-in-new-window', {
  mounted: function(el) {
    const anchors = el.querySelectorAll('a')
    anchors.forEach((anchor) => anchor.target = "_blank")
  }
})

HTML也是一样，记得用v- => v-links-in-new-window

<div class="content" v-html="content" v-links-in-new-window></div>

【讨论】：