iframe跨域解决方案

iframe跨域一直是个难题，网上也有很多解决方案，大部分都不太好用，而且特别麻烦。

我这里介绍一个简单的方法：利用html5的postMessage解决跨域、跨窗口消息传递。

向外界窗口发送消息

otherWindow.postMessage(message, targetOrigin);

otherWindow: 指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口

参数说明

主要思路就是利用postMessage方法把参数传递给iframe，由iframe监听接收消息把数据处理后再利用postMessage方法传回给父级。

下面我提供一个获取iframe高度的例子

父级页面向iframe子页面发送指令

<script>
	function _mainFrame() {
		window.frames[0].postMessage('getHeight', 'https://www.w7.cc/');
	}
	
	window.addEventListener('message',function(e) {
		var canvasHeight = e.data;
		//这里根据返回的数据做其他的处理
	}
</script>

<iframe id="mainFrame" name="mainFrame" allowtransparency="true" frameborder="0" width="100%" height="5000" scrolling="no" onload="_mainFrame()" src="https://www.w7.cc/"></iframe>

iframe子页面接收指令，处理数据并回传给父级

<script>
	window.addEventListener('message', function(e) {
		if(e.source != window.parent) return;
		if(e.data == 'getHeight') {
			window.parent.postMessage(document.body.offsetHeight, '*');
		}
	}, false);
</script>