最近项目中的需求是实现iframe高度的自适应,因为iframe表单中的内容多少不固定,所以高度也是不固定的,网上百度了好多方法,发现都没用。
偶然间发现父页面和iframe子页面之间可以通过postMessage通信,这样的话,就可以在子页面获取表单的整体高度height值,然后通过通信的方式传递给父页面,父页面拿到height值,再赋值给iframe。
这样我的问题就得到了完美解决,话不多说,上代码。
1.iframe子页面
//在页面初始化之后执行该方法,mainForm是表单父元素的id
function postMessage() {
var height = document.getElementById('mainForm').offsetHeight;