如何避免 v-html 改变网站内容？

Question

我正在vue中构建代码编辑器。 我使用v-html来渲染html、css和js。

这是一些代码：

<template>
  <div class="grid">
    <div id="html" class="grid-cell">
      <textarea v-model="htmlCode" name="" id="" cols="30" rows="10"></textarea>
      <div class="title">This is a cell</div>
    </div>
    <div id="css" class="grid-cell">
      <textarea v-model="cssCode" name="" id="" cols="30" rows="10"></textarea>
      <div class="title">This is a cell</div>
    </div>
    <div id="js" class="grid-cell">
      <textarea v-model="jsCode" name="" id="" cols="30" rows="10"></textarea>
      <div class="title">This is a cell</div>
    </div>
    <div id="preview" class="grid-cell">
      <div
        v-html="
          htmlCode +
          styleBegin +
          cssCode +
          stylEend +
          scriptBegin +
          jsCode +
          scriptEnd
        "
      ></div>
      <div class="title">This is a cell</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CodeEditor",
  methods: {},
  data() {
    return {
      htmlCode: "<h1>hi</h1>",
      cssCode: "",
      jsCode: "",
      styleBegin: "<style>",
      styleEnd: "</style>",
      scriptBegin: "<script>",
      scriptEnd: "</"+"script>"
    };
  },
  computed: {},
};
</script>

我遇到的问题是，当用户在代码编辑器中输入内容时，它会影响网站本身（我的网站）

如果有人知道解决方案，我将不胜感激，谢谢！

Answer 1

您可以使用iframe及其srcdoc属性，如下所示：

<iframe :srcdoc="
   htmlCode + 
   styleBegin + 
   cssCode + 
   stylEend + 
   scriptBegin + 
   jsCode + 
   scriptEnd"></iframe>