博客
关于我
vue嵌套iframe问题
阅读量:620 次
发布时间:2019-03-12

本文共 2721 字,大约阅读时间需要 9 分钟。

最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目,尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。

router.go()的失效问题

  此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。

  详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该窗口文档的window.history.go(-1),并未更改父级项目的路由后退功能。

  解决办法:

  不通过改变iframe->src属性值去访问具体内容,采用window.location.replace(url)更改iframe将访问的内容,具体代码如下:

这有一个iframe标签,src指向的是一个路径(图片路径)

在这里插入图片描述

在浏览器上用审查元素看一下:1.iframe 2.#document 3.html 4.head 5.body 6.body.img
在这里插入图片描述
那么问题来了,怎么给iframe里边的img设置宽和高呢?

  1. let iframe =.document.getElementById(“preview”);//通过id找到想要元素
  2. let iwindow = iframe.contentWindow;//获取iframe的window对象
  3. 以下很是致命,切记:在iframe加载完毕才能拿到里面的所有document树(代码第五行)
  4. let idoc = iwindow.document; //获取iframe的document
  5. let img = idoc.getElementsByTagName(‘img’)[0];//搜索指定元素的后代,不包括自身,【0】第一个’img’
  6. img.width = iframe.clientWidth;将iframe的宽赋值给图片,高也是一样。
let iframe = document.getElementById("preview");//通过id找到想要元素                console.log("iframe",iframe);                let iwindow = iframe.contentWindow;                                iframe.addEventListener('load',function () {                // 在iframe加载完毕才能拿到里面的所有document树                //很重要,必须放置在load函数里                //切记,坑深勿踩                    let idoc = iwindow.document;                    console.log("iwindow", iwindow);                    console.log("idoc", idoc);                    let img = idoc.getElementsByTagName('img')[0];                    if (img) {                        if(img.width >= img.height){                            img.width = iframe.clientWidth;                            let top = (iframe.clientHeight - img.height) / 2;                            img.style.marginTop = top + "px";                        }else {                            img.height = iframe.clientHeight;                            let left = (iframe.clientWidth - img.width) / 2;                            img.style.marginLeft = left + "px";                        }                    }   })

 clientWidth = width+左右padding;

clientHeigh = height + 上下padding ;
clientTop = boder.top(上边框的宽度);
clientLeft = boder.left(左边框的宽度);
marginTop:设置一个p元素的上部边距
marginLeft:设置一个p元素的左部边距

以下内容可加在合适的位置控制台输出查看

// console.log("window",iwindow);//获取iframe的window对象                    // console.log("document",idoc);  //获取iframe的document                    // console.log("html",idoc.documentElement);//获取iframe的html                    // console.log("head",idoc.head);  //获取head                    // console.log("body",idoc.body);  //获取body                    // console.log("img",idoc.getElementsByTagName('img'[0]));//获取img                    // console.log("iframeWidth",iframe.clientWidth);//获取iframe的宽                    // console.log("imgWidth",idoc.body.getElementsByTagName('img'[0]));//获取img的宽

 

转载地址:http://flrxz.baihongyu.com/

你可能感兴趣的文章
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>
mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
查看>>
mysql 死锁(先delete 后insert)日志分析
查看>>
MySQL 死锁了,怎么办?
查看>>
MySQL 深度分页性能急剧下降,该如何优化?
查看>>
MySQL 深度分页性能急剧下降,该如何优化?
查看>>
MySQL 添加列,修改列,删除列
查看>>