解决使用iframe产生跨域问题

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

解决方法是采用html5的

postMessage

来解决上述问题

用法

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

参数详解可参考MDN

子页面向父页面传值

父页面监听

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()