入坑前端后第一个遇到的难题,其实百度有一大堆解决方案,自己记录下来印象会深刻一点。
需求背景:父页面内嵌一个跨域的子页面,但是子页面的内容是未知的,意味着子页面的高度也是未知的,父页面的样式不能定死高度,不然会出现双重滚动条(子页面有滚动条,父页面也会出现滚动条)
解决方案:公司里大神出的方案,跨域的b.html页面中再嵌入一个代理页面agent.html,代理页面跟最外层的父页面a.html是同源的,b.html通过在<iframe>标签请求的url中加入b.html的页面高度告诉agent.html,在agent.html中通过window.onload事件(推荐)获取到b.html的高度,因为a.html和agent.html同源的关系,agent.html中可以通过window.parent.parent获取到a.html中的DOM元素,即子页面iframe,最后设置iframe高度。
目前不知道是否最佳方案
参考资料:http://caibaojian.com/iframe-adjust-content-height.html