重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用postMessage怎么实现iframe自适应高度

这篇文章将为大家详细讲解有关使用postMessage怎么实现iframe自适应高度，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

站在用户的角度思考问题，与客户深入沟通，找到玉树网站设计与玉树网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网站空间、企业邮箱。业务覆盖玉树地区。

index.html ：



    
    var $ = window.jQuery;
    
  
  
    
    css study

window.addEventListener('message', e => { if (e.data.type === 1) { $('#shopIframeId').width(e.data.data.width + 50) $('#shopIframeId').height(e.data.data.height + 50) } });

body.html:

 
 
    
    var $ = window.jQuery;
    
   
   
     
     css study
   
 
   
   
 
 
 var data = {
   el: $('.box'),
   height: $('.box').outerHeight(),
   width: $('.box').outerWidth(),
   parent: window.parent
 }

 $('.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
     }
   }, '*')
 })

正题

我们知道，把大象装进去需要四步。

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