<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我是主框架页面</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section style="padding: 10px; min-height: 100px">
<div>我是主框架页面</div>
<div>我接收到的信息如下：</div>
<div class="received"></div>
</section>
<iframe id="iframe" src="http://192.168.0.100:3002/son.html" width="100%" height="100%" frameborder="0"></iframe>
<script>
const received = document.querySelector('.received');
const iframe = document.getElementById('iframe');
// 监听子页面发送过来的信息
const receivedMessage = function (event) {
console.log('received message from son: ', event);
const data = event.data;
received.innerHTML = JSON.stringify(data);
iframe.contentWindow.postMessage({ data: '我已经收到你发送的数据啦' + data.message }, { targetOrigin: '*' });
};
window.addEventListener('message', receivedMessage, false);
localStorage.setItem('parent', '主框架页面数据');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>子系统页面</title>
<style>
* {
margin: 0;
padding: 0;
}
.son {
width: 100%;
height: 100%;
background-color: #e4e4e4;
}
.content {
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<body class="son">
<section class="content">
<h2>我是子系统页面区域</h2>
<input type="text" class="inputMessage" placeholder="输入待发送的信息" />
<button class="sendMessageToParent">向父容器发送信息</button>
<section>接收数据如下：</section>
<div class="received"></div>
</section>
<script>
const inputMessage = document.querySelector('.inputMessage');
const sendMessageToParent = document.querySelector('.sendMessageToParent');
const received = document.querySelector('.received');
// 发送信息
const sendMessage = function () {
const value = inputMessage.value;
if (value) {
window.parent.postMessage({ message: value }, { targetOrigin: '*' });
}
};
sendMessageToParent.addEventListener('click', sendMessage, false);
localStorage.setItem('son', 'son数据');
// 接收信息
const receivedMessage = function (event) {
console.log('received message from parent: ', event);
received.innerHTML = JSON.stringify(event.data);
};
window.addEventListener('message', receivedMessage, false);
</script>
</body>
</html>
// 对于多层嵌套的iframe向最外层发送消息的解决通信方案如下：
/**
* iframe嵌套页面向最外层发送消息
* @param message
*/
function postMessageFromIFramePage(message) {
var top = window.top;
while(top.top != top.self){
top = top.top
}
top.postMessage(message, '*');
}
