iframe获取页面高度的方法含跨域（非同源策略）

最新推荐文章于 2025-06-26 11:00:07 发布

原创最新推荐文章于 2025-06-26 11:00:07 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

iframe 同时被 2 个专栏收录

1 篇文章

订阅专栏

iframe页面通信

1 篇文章

订阅专栏

本文详细介绍了如何在同源和跨域环境下，通过JavaScript处理iframe内容高度的动态同步。对于同源策略，直接通过contentWindow或contentDocument获取iframe内容高度并设置。而在跨域场景下，利用postMessage通信机制，让子页面调用父页面方法，传递高度信息，实现高度动态更新。同时，文章提到了onload和onresize事件在处理高度变化中的应用。

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

最近项目中需要对接企业微信，需要把原本app的功能搬到H5中，无奈中需要嵌入一块定制模块，开发太废时，无奈又要搞iframe。

首先时同源策略下（不跨域的做法）

<iframe
         id="ifrma2"
         name="ifrma2"
         width="100%" 
         height="100%" 
         :src="iframeUrl"
         @load.once="IFload"
       ></iframe>

vue写的，原生可以直接用window.onload = functiong(）{}

const IFload = () => { 
	var oIframe: any = (<HTMLElement>document.getElementById("ifrma2"))
    try{
        // console.log(oIframe.contentDocument)
        const bodyDom = oIframe.contentWindow || oIframe.contentDocument.parentWindow;
        state.height = bodyDom.document.body.scrollHeight || bodyDom.document.documentElement.scrollHeight
        // console.log(bodyDom, state.height)
      } catch (e) {
        console.log(e)
      }
      oIframe.style.height  =  state.height
}

直接获取iframe内body的高度，赋值给iframe

现在是跨域（非同源）的解决办法：
需要子页面调用父默认的方法，父页面监听方法的执行来解决：重点 postMessage()
父页面iframe

<iframe
         id="ifrma2"
         name="ifrma2"
         width="100%" 
         height="100%" 
         :src="iframeUrl"
         @load.once="IFload"
       ></iframe>
       
 // js监听嵌入页面调用时触发
const IFload = () => { 
	window.addEventListener('message', function(event) {
        // alert(event.data)
        // console.log(event)
        if (event.origin === "http://localhost:8080") {
          // alert(even
          (<HTMLElement>document.getElementById("ifrma1")).style.height = event.data + "px";
        }
      })
}

嵌入子页面(页面加载完毕后再执行）

	var hashH = document.documentElement.scrollHeight; //获取自身高度
	// 全局下的parent其实是父页面的对象，所以调用postMessage()调用的也就是父级页面的方法，
     window.parent.postMessage(hashH, "*");

调用后父页面拿到子页面传过来的高度，动态赋值，可用onload()事件处理，多次调用能实现懒加载页面多测高度变化的传递；
还可以用
window.onresize = () =>{} 监听页面高度变化的方法取监听