iframe标签跨域自适应高度

iframe开发中,遇到两个域名不一致,想要获取iframe中的内容时,跨域问题;

查了很多方案:最终解决方式使用了postmessage来进行两个项目间数据传递(当然,这个适用于两个项目都能进行开发的情况)

使用postmessage时,要注意一点,如果你两方都不确定具体域名是哪个时,postmessage第二个参数TargetOrigin直接使用“ * ”就好,它对任何发送的信息都不会进行限制,但可能会有弊端(暂不清楚,可能会存在漏洞吧)

我们通过window.message来监听postmesage发过来的信息

实现如下:

父页面调用:

<iframe src="www.baiidu.com" allowTransparency="true" marginheight="40px" scrolling="no" id="detail" frameborder="0" width="100%"  onLoad="onLoad()"></iframe>

 

js代码

window.onLoad = () => {
  var obj = $('#detail')[0].contentWindow;
  obj.postMessage('height', '*');
  window.onmessage = function (e) {
   var obj = e.data;     
  $('#detail').css('height', obj.height);
  }
}

 

子页面:

注意:document.body.getBoundingClientRect().height获取高度很重要,因为在获取iframe高度时,刚开始我是使用document.body.scrollHeight来获取页面内容高度,刚开始在pc端调试是正常的,然而,到了移动端调试时,高度不准确,原因是使用document.body.scrollHeight时返回现在所展示这些页面中的最高高度,而不是每个页面的内容高度

代码实现如下:

window.onmessage = function (e) {                                           
  var height = Number(document.body.getBoundingClientRect().height) + 80;   
  var obj = {                                                               
    height,                                                                 
  }                                                                         
  top.postMessage(obj, '*')                                                 
}

 

posted @ 2022-01-27 17:31  不会飞的木木夕  阅读(380)  评论(0编辑  收藏  举报