解决使用iframe产生跨域问题

在项目中有时候需要嵌套不同项目的代码，可能是使用不同框架构建的或域名不同，这里就需要使用iframe进行嵌套，但是使用iframe违反了浏览器的安全策略，会造成通信跨域的问题

Blocked a frame with origin "https:/*******com" from accessing a cross-origin frame.

解决方法是采用html5的postMessage来解决上述问题

用法

// message: 表示要发送的数据 // targetOrigin: 表示接受源的限制，不做限制是*,如果限制接受源：'https://www.test.com',则只能在该接受源下才能获取message otherWindow.postMessage(message, targetOrigin, [transfer]);

参数详解可参考MDN

子页面向父页面传值

window.parent.postMessage(data, '*')

父页面监听

window.addEventListener('message', function(e){ })

父页面向子页面传值

// iframeModal是iframe的id window.frames.iframeModal.contentWindow.postMessage({type: 'close'}, '*') or document.getElementById('iframe').contentWindow.postMessage(data,'*')

子页面监听

window.addEventListener('message',function(e) { )

另外还有父页面直接调用子页面方法，这个需要将子页面的方法挂载到window上面

window.childTest = function(){ ... }

父页面调用该方法

window.frames.iframeModal.contentWindow.childTest() or document.getElementById('iframe').contentWindow,childTest()