iframe 父子窗口的相关api

最近用做了一个外包小项目，由于有很多单页面，想要实现背景音乐不断的需求，又不想用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;