码迷,mamicode.com
首页 > 其他好文 > 详细

<iframe>小总结

时间:2017-06-19 13:09:17      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:pos   高度   子页面   log   ora   传递数据   content   传递   document   

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

<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传送过来的信息.

注:子页面能得到父级传送的message,必须确保父级窗口未关闭。(ifame元素不会失效)

<iframe>小总结

标签:pos   高度   子页面   log   ora   传递数据   content   传递   document   

原文地址:http://www.cnblogs.com/xiaoxiao666/p/7047730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!