html5 postMessage跨域数据传输

主页面:

<body>
<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
<div>这是父页面:</div>
<div id="text"></div>
</div>
<div>
<div>这是子页面:</div>
<iframe id="child" src="http://localhost:60003/test.html"></iframe>

</div>
<script type="text/javascript">
window.addEventListener('message', function (e) {
$("#text").text(e.data);
}, false);
</script>


</body>

子页面:http://localhost:60003/test.html

<body style="height:100%;">
<div id="container" onclick="change();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
点我传数据给父页面
</div>

<script type="text/javascript">
function change() {
window.parent.postMessage("传个data给你", '*');
}
</script>

</body>

猜你喜欢

转载自www.cnblogs.com/zygege/p/12955847.html