使用postMessage怎么实现iframe自适应高度-创新互联
这篇文章将为大家详细讲解有关使用postMessage怎么实现iframe自适应高度,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
在革吉等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、网站制作、外贸营销网站建设 网站设计制作定制设计,公司网站建设,企业网站建设,高端网站设计,成都全网营销推广,外贸营销网站建设,革吉网站建设费用合理。index.html :
css study
body.html:
css study
正题
我们知道,把大象装进去需要四步。
使用postMessage API发送消息比装大象要少一步,只需要三步就行。
分别是:
1、找到发送对象
2、发送消息
3、设置消息处理
接下来,我们用上面的例子,一一来说。
1、找到发送目标对象
使用window.parent 就可以获取引入自身文档的父window对象。
var data = { el: $('.box'), height: $('.box').outerHeight(), width: $('.box').outerWidth(), parent: window.parent }
我在这一步中还初始化了鉴定dom,监听dom的height和width,核心是用window.parent获取index.html文件的window对象
2、在iframe中发送消息
$('.box').on('click', function () { // 更新数据 if (data.width < 1250) { data.width += 50 } data.height += 50 // 更新视图 data.el.width(data.width) data.el.height(data.height) // 通知父window 自身高度变更 data.parent.postMessage({ type: 1, data: { width: data.width, height: data.height } }, '*') })
给目标div挂在一个单机事件,每次点击时,都会增加50xp的宽高(如果宽度大于等于1250则宽度不增加)。
然后使用el.postMessage(message, targetOrigin)方法发送消息。
el:
el是其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message:
message参数是要传输的数据消息体。
targetOrigin:
targetOrigin参数通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。
3、设置消息处理
window.addEventListener('message', e => { if (e.data.type === 1) { $('#shopIframeId').width(e.data.data.width + 50) $('#shopIframeId').height(e.data.data.height + 50) } });
我再index.html 添加了message监听,如果有消息被发送过来,则会触发处理函数,更新iframe标签的宽高。
处理函数传入一个参数e,e是一个消息对象,包含如下重要属性:
data:
从其他 window 中传递过来的对象。
origin:
调用postMessage
时消息发送方窗口的origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org
(隐含端口443
)”、“http://example.net
(隐含端口80
)”、“http://example.com:8080
”。请注意,这个origin不能保证是该窗口的当前或未来origin,因为postMessage被调用后可能被导航到不同的位置。
source:
对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
关于使用postMessage怎么实现iframe自适应高度就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
本文题目:使用postMessage怎么实现iframe自适应高度-创新互联
文章位置:http://myzitong.com/article/ghjpd.html