在 vue 中本地化 html 内容答案

【问题标题】：Localizing html content in vue在 vue 中本地化 html 内容
【发布时间】：2021-04-17 11:33:39
【问题描述】：

所以我一直在使用 v-html 标签在我的 vue 页面中呈现 html。但我遇到了一个字符串，它是一个正确的 html 文件，它包含类似这样的文本：

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
....
<style>
</style>
</head>

<body style="....">
</body>

</html>

问题是，我在一个 div 上有 v-html，但是这段代码开始影响整个页面并将其样式添加到整个页面，而不仅仅是特定的 div。

我尝试将“范围”添加到样式标签，但没有奏效。也许是因为body上还有一个样式内联标签？

我需要找到一种方法让 html 只影响它所在的 div，而不是整个页面。

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

您最好的选择可能是更好地控制使用v-html 添加的 HTML。我建议先解析它并只保留<body> 标签。您可以使用正则表达式来做到这一点，但使用 dom 解析器库会更容易。以DomParser 为例：

const DomParser = require("dom-parser");
const parser = new DomParser();

export default {
  // ...
  computed: {
    html() {
      const rawHtml = "<html><body><div>test</div></body></html>"; // This data should come from your server
      const dom = parser.parseFromString(rawHtml);
      return dom.getElementsByTagName("body")[0].innerHTML;
    }
  }
}

请注意，这是一个过于简单的解决方案，因为它无法处理没有<body> 标签的情况。

【讨论】：

【解决方案2】：

首先，在将外部 HTML 与 v-html 一起使用时，您应该非常小心，因为它会使您的网站容易受到各种攻击 (see Vue docs)。

现在，如果您信任 HTML 源，另一个问题是如何在不影响您自己的情况下嵌入它。这种情况有一个特殊的元素，<iframe> - 它并非没有风险，您绝对应该阅读一些关于如何使其安全的内容，但它应该可以解决您的问题，因为它是“沙盒”外部 HMTL，因此它不会影响您的网站.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

【讨论】：