parent-index.html: （本地起服務，放在5000端口上）
<div class="content">
<iframe src="http://localhost:5001/public/second.html" id="sendMessage" name="sendMessage" onload="resize()"></iframe>
</div>
<script type="text/javascript">
//當前腳本
function resize() {
var ifr = document.getElementById('sendMessage');
//使用iframe的window向iframe發送message。
ifr.contentWindow.postMessage("123", "http://localhost:5001");
window.addEventListener('message', function (e) {
alert('回傳 ' + e.data)
})
}
</script>
child-second.html: （本地起服務，放在5001端口上）
<div class="content">
<div id="howMuch">xxxxx</div>
</div>
<script type="text/javascript">
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.data) {
console.log(e)
// 注釋掉的為單次父子交互
// var obj = {'name': 'qwer','age': 'xxx'}
// e.source.postMessage(JSON.stringify(obj), e.origin);
// console.log(e.data)
document.getElementById('howMuch').onclick = function second() {
// 父子建立聯系后，兒子html可以通過點擊事件多次主動向父親傳值
var obj = {'name': 'qwer','age': 'xxx'}
window.parent.postMessage(JSON.stringify(obj), 'http://localhost:5000')
}
} else {
alert(e.data);
}
}
</script>