React 使用postMessage获取iframe内容高度完成自适应(不设置高度)

烈焰晴天

已于 2023-05-21 13:56:54 修改

阅读量686

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2023-05-14 00:24:51 首次发布

本文链接：https://blog.csdn.net/qq_21937107/article/details/130664281

本文介绍了React中如何使用postMessage通信来获取iframe内容的高度，从而实现iframe的自适应布局。详细讨论了三种方法，包括自行计算高度、使用iframe-resizer库以及postMessage通信。特别指出，虽然postMessage方法兼容性好，但在iOS移动端，无论同源或跨域，iframe内容会以新窗口打开，遮挡顶部内容，这是一个目前无法解决的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式自己计算不支持跨域的url

      <iframe id='iframe' width='100%' onLoad={resizeHeight} src="http://127.0.0.1:8000/testPage" frameBorder='0'></iframe>

使用Iframe标签 onload方法通过动态计算获取iframe内容高度的函数，此方法兼容性比较好，但仅仅是同源，即url协议、域名、端口号必须和父页面保持一致，所以把它给毙了

 const resizeHeight=()=>{
   
   
 let iframe = document.querySelector('#iframe');
   let contentHeight = Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.offsetHeight,
      document.body.clientHeight,
      document.documentElement.clientHeight
    )