<iframe>小总结

最近项目用到了<iframe>标签，做个总结吧~

border样式兼容方面:

ie7,ie8下需要动态生成<iframe>标签，在append到html之间给他设定:

 var ifr = document.createElement('iframe'); 
 ifr.setAttribute('frameBorder', 0);

<iframe>标签有个难用的地方，就是高度并不能随着内容撑开，要自己给他规定高度。

1.想要操控父级元素在jQuery下需要用到window.parent.document，如：$('body iframe', window.parent.document).css({height:'子页面高度' + 'px'});

2.想要操控父级js变量/函数，子页面里可加上parent.父级某变量/父级函数;(此变量在父级中必须是全局的)；

<iframe>虽然会增加双倍内存，但是他也可以结合window.localStorage在跨域传送信息时用到(h5)。

比如a.html中的信息，可通过iframe.contentWindow操控子页面的window,并用postMessage方法传递数据。iframe.contentWindow.postMessage(信息,'b.html');//b页面为a页面的子页面.

子页面接收：window.addEventListener('message',function(event) {console.log(event.data)})；//此event.data就是a.html传送过来的信息.

ifame中允许视频全屏：allowfullscreen="true" frameborder="0"

注：子页面能得到父级传送的message，必须确保父级窗口未关闭。（否则ifame元素失效）