iframe 子窗口发消息给父窗口（跨域）

2019.10.22 修改

情景：父窗口内通过iframe跨域引入子页面。通过postMessages实现跨域通讯。

跨域情况下：

1. “父” 发消息给 “子”：

子窗口注册 以下事件接收：

window.addEventListener('message', (e) => {}, false)

父窗口通过 以下方式发消息即可：

document.getElementById('iframe').contentWindow.postMessage('来自父窗口的消息', 'c.aaa.com')

2. “子” 发消息给 “父”：

以上方式就不能实现了，因为跨域，子窗口拿不到父窗口的window.parent / top。

(1) 可以通过 “页面代理” 的方式解决， 具体原理：博主“伯纳乌的追风少年”这篇博客写得很清晰。

(2) 父窗口首先postMessage给子窗口，子窗口在接受到消息后，存储 全局/局部 变量 evevt

let parentEvent = null

window.onload = function() {
	window.addEventListener('message', receiveMsg, false)
}

function receiveMsg(e) {
	console.log('子系统接收消息', e)

	// 存储全局变量 e
	parentEvent = e
	event.source.postMessage('消息回传', e.origin);
}

function postMsg() {
	let data = { usr: 'admin', psd: '123' }
	// 1. 这种事拿不到的，跨域
	// window.top.postMessage(data, parentEvent.origin)

	// 2. 通过上一步存储的父窗口对象
	parentEvent.source.postMessage(data, parentEvent.origin)
}

 

此文为自己学习记录，链接了 博主“伯纳乌的追风少年” 的博客，如有侵权，我马上删除，感谢。