vue 根页面上操作 iframe 的方式（伪造多页面）：

最新推荐文章于 2024-06-25 15:22:52 发布

Riverse

最新推荐文章于 2024-06-25 15:22:52 发布

阅读量1.9k

点赞数

分类专栏： vue前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_61452987/article/details/125491901

版权

vue前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

本文介绍了在前端开发中如何有效地管理iframe，包括动态插入、检查已存在iframe、路由切换时的显示隐藏、离开页面时的隐藏以及关闭时的销毁，以优化内存使用。同时提到了visibility与display属性的区别，并分享了其他相关博客资源。

摘要由CSDN通过智能技术生成

1、动态往页面上插入iframe的函数：

getList(){
    let container = document.getElementById("xx");
    // iframe赋值
    container.id = this.$route.params.id;
    container.src = "xxx";
    document.body.appendChild(container);
}

2、如果页面上有相同的iframe则不生成，没有就插入：

      var x = 0;
      // 切换iframe的显示：
      var ifrs;
      ifrs = document.getElementsByTagName("iframe");
      if (ifrs.length > 0) {
        var i = ifrs.length;
        while (i--) {
          if (ifrs[i].getAttribute("id") === this.$route.params.id) {
            console.log("-------------存在iframe，不生成！--------------");
            x = x + 1;
          }
        }
      }
      if (x === 0) {
        this.getList();
      }

3、路由进入或者更新时，切换iframe的显示与隐藏：

  // 分别在路由进来之前和页面组件重新加载之前切换iframe
  async beforeRouteEnter(to, from, next) {
    if (to.params.id) {
      // 切换iframe的显示：
      var ifrs;
      ifrs = document.getElementsByTagName("iframe");
      var i = ifrs.length;
      if (i >= 1) {
        while (i--) {
          if (ifrs[i].getAttribute("id") === to.params.id) {
            ifrs[i].style.visibility = "visible";
          } else {
            ifrs[i].style.visibility = "hidden";
          }
        }
      }
      if (i < 1) {
        next();
      }
    }
  },
  async beforeRouteUpdate(to, from, next) {
    if (to.params.id) {
      var ifrs;
      ifrs = document.getElementsByTagName("iframe");
      var i = ifrs.length;
      if (i >= 1) {
        while (i--) {
          if (ifrs[i].getAttribute("id") === to.params.id) {
            ifrs[i].style.visibility = "visible";
          } else {
            ifrs[i].style.visibility = "hidden";
          }
        }
      }
      if (i < 1) {
        next();
      }
    }
  },

// visibility:hiddle 和 display:none 的区别： visibility 会占用空间，而 display 不会占用

4、路由离开当前页时，隐藏所有的 iframe：

  // 离开页面前隐藏所有iframe
  beforeRouteLeave(to, from, next) {
    var ifrs;
    ifrs = document.getElementsByTagName("iframe");
    var i = ifrs.length;
    if (i >= 1) {
      while (i--) {
        ifrs[i].style.visibility = "hidden";
      }
    }
    if (i < 1) {
      next();
    }
  },

5、关闭页签时销毁页面的 iframe：

export const clearIFrame = (topicId) => {
  var ifrs;
  ifrs = document.getElementsByTagName("iframe");
  if (!ifrs || ifrs.length === 0) {
    return
  }
  for (let i = 0; i < ifrs.length; i++) {
    const iframeDom = ifrs[i];
    if (iframeDom && ifrs[i].getAttribute("id") == topicId) {
      iframeDom.remove(); //我是直接这样移除的，还可以参考以下方法：

      // try {
      //   iframeDom.src = "about:blank"; // 把iframe指向空白页面，这样能够释放大部分内存。
      //   iframeDom.contentWindow.document.write(""); //清空frame的内容
      //   iframeDom.contentWindow.document.clear();
      //   iframeDom.contentWindow.close(); //避免frame内存泄漏
      // } catch (e) { }
      // document.body.removeChild(iframeDom);
    }
  }
}