vue 嵌入iframe的一些问题

LHC087

已于 2022-07-15 18:07:59 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-07-15 18:05:23 首次发布

本文链接：https://blog.csdn.net/weixin_43829905/article/details/125809309

在Vue项目中嵌入iframe时，遇到了路由重置和遮罩层无法完全覆盖的问题。解决方案包括在iframe项目内修改路由设置以保持页面状态，以及在父级项目中配合iframe调整遮罩层，以确保弹窗时能正确覆盖整个窗口。目前，这些方法可能存在偶发问题和动画同步不足，需要进一步优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 嵌入iframe的一些问题

父级项目引入iframe的页面：

<template>
  <div>
    <iframe :src="src" id="attendanceManagementiframe" class="iframe" iframeborder="0"></iframe>
  </div>
</template>

<script>
import {
      mapState } from 'vuex'
export default {
     
  data() {
     
    return {
     
      src: ''
    }
  },
  methods: {
     
    init() {
     
      this.src = ''
      setTimeout(() => {
     
        this.src = `http://localhost.lingzhuyun.com:8800/hrmsweb/#/?token=${
       
          this.token
        }`
      }, 300)
    }
  },
  computed: {
     
    ...mapState(