vue动态创建iframe导致内存泄漏

Question

问题：vue动态创建iframe导致内存泄漏

描述：点击按钮动态创建Iframe，删除时内存释放不完全，导致内存泄漏

index.vue

<template>
  <div class="container">
    <el-button type="primary"
               @click="handleClick">{{ btnText }}
    </el-button>
    <div ref="iframeContainer"
         style="margin-top: 16px;">
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  methods: {
    //按钮点击事件
    handleClick() {
      switch (this.btnText) {
        case "创建iframe":
          this.createIframe();
          break;
        case "删除iframe":
          this.deleteIframe();
          break;
      }
    },
    //创建iframe
    createIframe() {
      let iframe = document.createElement('iframe');
      iframe.src = "http://localhost:8082/#/myIframe";
      iframe.width = "400px";
      iframe.height = "800px";
      iframe.id = 'myiframe';
      this.$refs.iframeContainer.appendChild(iframe);
      this.btnText = "删除iframe";
    },
    //删除iframe
    deleteIframe() {
      let iframe = document.getElementById('myiframe');
      iframe.src = "about:blank";
      iframe.contentWindow.document.write("");
      iframe.contentWindow.document.clear();
      iframe.contentWindow.close();
      this.$refs.iframeContainer.removeChild(iframe);
      this.btnText = "创建iframe";
    }
  },
  data() {
    return {
      iframeShow: false,
      btnText: "创建iframe"
    }
  }
}
</script>

<style>
.container {
  padding: 16px;
}
</style>

myIframe.vue

<template>
  <div>
    <el-form ref="form" :rules="formRules" :model="formData" :label-width="labelWidth">
      <el-form-item label="field1" :col="1" prop="field1">
          <el-input v-model="formData.field1" placeholder="field1"></el-input>
      </el-form-item>
      <el-form-item label="field2" :col="1" prop="field2">
        <el-input v-model="formData.field2" placeholder="field2" :data="regionList"></el-input>
      </el-form-item>
      <el-form-item label="field4" :col="2">
        <el-input v-model="formData.field4" placeholder="field4"></el-input>
      </el-form-item>
      <el-form-item label="field5" :col="1" >
        <el-input v-model="formData.field5" placeholder="field5"></el-input>
      </el-form-item>
      <el-form-item label="field6" :col="1">
        <el-input v-model="formData.field6" placeholder="field6"></el-input>
      </el-form-item>
      <el-form-item label="field7" :col="1">
        <el-input v-model="formData.field7" placeholder="field7"></el-input>
      </el-form-item>
      <el-form-item label="field8" :col="1">
        <el-input v-model="formData.field8" placeholder="field8"></el-input>
      </el-form-item>
      <el-form-item label="field9" :col="1">
        <el-input v-model="formData.field9" placeholder="field9"></el-input>
      </el-form-item>
      <el-form-item label="field10" :col="1">
        <el-input v-model="formData.field10" placeholder="field10"></el-input>
      </el-form-item>
      <el-form-item label="field3" :col="2">
        <el-input v-model="formData.field3" placeholder="field3" type="textarea" class="demo-remark"></el-input>
      </el-form-item>
      <el-form-item :col="1">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'iframe',
  mounted() {

  },
  methods: {
    onSubmit() {
      this.$refs.form.validate();
    }
  },
  data() {
    return {
      colsNumInRow:1,
      labelWidth:'80px',
      formData: {
        field1: '',
        field2: '',
        field3: '',
        field4: '',
        field5: '',
        field6: '',
        field7: '',
        field8: '',
        field9: '',
        field10: ''
      },
      regionList: [{"code":"shanghai","name":"上海"}, {"code":"beijing","name":"北京"}],
      formRules: {
        field1: [{required: true, message: '必填项', trigger: 'change'}],
        field2: [{required: true, message: '必填项', trigger: 'change'}]
      },
    }
  }
}
</script>

<style scoped>

</style>

Answer 1

在删除iframe之前，应该先清除iframe内部的内容，确保内存得到释放。在 deleteIframe 方法中添加清除iframe内容的操作。

修改后的代码如下：

deleteIframe() {
  let iframe = document.getElementById('myiframe');
  iframe.src = "about:blank";
  iframe.contentWindow.document.write("");
  iframe.contentWindow.document.clear();
  iframe.contentWindow.close();
  this.$refs.iframeContainer.removeChild(iframe);
  iframe = null; //手动释放iframe对象
  this.btnText = "创建iframe";
}

在删除iframe后，可以手动释放iframe对象，以便帮助JavaScript垃圾回收器回收内存。
注意：应该尽量避免动态创建iframe，因为iframe会阻塞主线程，影响页面的性能和用户体验。如果需要加载外部页面，可以使用 window.open 方法打开新窗口，或者使用Vue的路由功能在同一个页面中切换路由。