使用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://scyanting.com/article/jsjejj.html