父子页面通过postMessage通信实现iframe高度自适应

最近项目中的需求是实现iframe高度的自适应，因为iframe表单中的内容多少不固定，所以高度也是不固定的，网上百度了好多方法，发现都没用。

偶然间发现父页面和iframe子页面之间可以通过postMessage通信，这样的话，就可以在子页面获取表单的整体高度height值，然后通过通信的方式传递给父页面，父页面拿到height值，再赋值给iframe。

这样我的问题就得到了完美解决，话不多说，上代码。

1.iframe子页面

//在页面初始化之后执行该方法，mainForm是表单父元素的id
function postMessage() {
	var height = document.getElementById('mainForm').offsetHeight;
	window.parent.postMessage({
		data: { height: height }
	});
}

2.父页面

window.addEventListener('message',function(e){
	if (e.data) {
		var height = e.data.data.height + 'px';
		var iframe= document.getElementById('iframe');
		iframe.style.height = height;
	};
});

以上是原生js的写法，jquery或者vue/react等语言开发的项目的话，只需要转换成对应的写法即可，window.parent.postMessage方法无需改变。