iframe跨域一直是个难题，网上也有很多解决方案，大部分都不太好用，而且特别麻烦。 我这里介绍一个简单的方法：利用html5的postMessage解决跨域、跨窗口消息传递。 ### 向外界窗口发送消息： ~~~ otherWindow.postMessage(message, targetOrigin); ~~~ otherWindow: 指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口 #### 参数说明： * **message**: 是要发送的消息，类型为 String、Object (IE8、9 不支持) * **targetOrigin**: 是限定消息接收范围，不限制请使用 ‘\*’ * * * 主要思路就是利用postMessage方法把参数传递给iframe，由iframe监听接收消息把数据处理后再利用postMessage方法传回给父级。 ### 下面我提供一个获取iframe高度的例子： 父级页面向iframe子页面发送指令： ~~~ <script> function _mainFrame() { window.frames[0].postMessage('getHeight', 'https://www.we7.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.we7.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> ~~~