最近用做了一个外包小项目,由于有很多单页面,想要实现背景音乐不断的需求,又不想用Vue,只好用iframe来嵌套了,期间也遇到一些问题,不过都不难,但是还是想做一下记录,以便日后翻阅。
一、iframe嵌套出现百边的问题:
frameborder="0" style="width: 100%;height: 100%;border: none;display: block;"
二、子页面的绝对定位问题:
问题描述:iframe子页面中的绝对定位会随着父元素滚动跟着滚动,不会直接相对于窗口定位,因为子页面的窗口就是父元素。
解决办法:比较粗暴的方法
将要定位的元素放在父页面上面,在需要的子页面时显示,当要进行交互时,采用父子页面方法互调api。
三、父子页面进行通信:
父页面调用子页面的方法:
//父页面的HTML
function callChild(){
// 这个就是获取iframe1对象 例如src,style等等
document.getElementsByName("iframe1")[0];
// 子页面的window对象
window.frames[0] || window.frames['iframe1']
//例如 获取子页面的宽高
window.frames['iframe1'].innerHeight / window.frames['iframe1'].innerWidth
// 获取子页面的某个元素
window.frames['iframe1'].document.getElementByTagName('tagname')
// 获取子页面的某个方法
window.frames['iframe1'].funName();
}
子页面调用父页面的方法:
// 子页面
this is a child
function funName(){
// 获取到父页面的窗口对象
parent.window
// 获取父页面的窗口对象的宽高
// 获取父页面的元素
// 获取父页面的另外一个iframe对象
// 获取父页面的另外一个iframe页面的方法或者元素
四、当父页面调用子页面方法时,注意判断是否加载完成,若未加载完成就对子页面进行某些操作可能会报错,所以可以加一个加载完成函数
window.frames[0].onload = function(){
// code in here ....
}
五、跨域传递数据
子页面可以往地址上添加数据,然后在父页面用定时器监听iframe的src是否有data数据变化。
另外一种H5的postMessage方法
传递消息:postMessage(data,origin)
data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化。
origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
接受消息:
接受消息:
window.addEventLister("message",function(e){
// if(e.source != window.parent) return; 可以判断消息的来源
// code in here ... ine.data
},false)
那就是:
1、当iframe中的二维码被按下的时候,将二维码地址推送至父页面,或者将父页面的二维码显示。
2、父页面接收到二维码识别的请求,则创建一个不可见的元素,为刚刚传输过来的二维码地址,并且二维码置顶铺满整个屏幕
3、在与时,通知父窗体删除二维码。
我自己当前的做法是,在子页面的二维码被按下的时候,将父页面的二维码显示,但是透明度为0,然后在与时,隐藏父窗体的二维码。对于图片不能保存问题,可以参见 webkit-touch-callout:default;
领取专属 10元无门槛券
私享最新 技术干货