当父页面与子页面，使用不是相同的域名，或不同的端口，两个页面之间受到同源策略限制。
直接调用 跨域页面的方法，会出现类似错误： Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame
子页面传给父页面
子页面 执行 window.parent.postMessage 方法传递参数，父页面监听 message 事件，接收参数。
子页面执行，发送参数
window.parent.postMessage('要传的参数','目标页面的地址')
window.parent.postMessage(data,'http://127.0.0.1:5500')
在父页面监听 message 事件，接收参数
window.addEventListener(
'message',
function (e) {
console.log('子传父message', e.data);
},
false
);
父页面传给子页面
方法类似于子页面传给父页面
父页面发送
function toChild() {
var data = '发送给子页面的内容';
document
.getElementById('iframe')
.contentWindow.postMessage(data, 'http://127.0.0.1:8080');
}
子页面接收
window.addEventListener(
'message',
function(e) {
console.log('收到来自父页面的内容：', e.data);
},
false
);
完整代码
父页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<div>父页面 <button onclick="toChild()">父传子</button></div>
<iframe
id="iframe"
width="700"
height="500"
src="http://127.0.0.1:8080/child.html"
frameborder="1"
></iframe>
</div>
<script>
window.addEventListener(
'message',
function(e) {
console.log('子传父 message', e.data);
},
false
);
function toChild() {
var data = '发送给子页面的内容';
document
.getElementById('iframe')
.contentWindow.postMessage(data, 'http://127.0.0.1:8080');
}
</script>
</body>
</html>
子页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>子页面<button onclick="toParent()">子传父</button></div>
<script>
function toParent() {
var data = {
name: '测试内容',
};
window.parent.postMessage(data, 'http://127.0.0.1:5500');
}
window.addEventListener(
'message',
function(e) {
console.log('收到来自父页面 message:', e.data);
},
false
);
</script>
</body>
</html>
参考链接：