溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用h5的postMessage方法iframe跨域消息傳遞的問題”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用h5的postMessage方法iframe跨域消息傳遞的問題”吧！
頁面1 localhost:8086/index.html復制代碼
<div >
<div id="color">Frame Color</div>
</div>
<div>
<iframe id="child" src="http://localhost:8087/index.html"></iframe>
</div>
<script type="text/javascript">
window.οnlοad=function(){
window.frames[0].postMessage('getcolor','http://localhost:8087');
}
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);
</script>
頁面2 localhost:8087/index.html
<body >
<div id="container" οnclick="changeColor();" >
click to change color
</div>
<script type="text/javascript">
var container=document.getElementById('container');
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);
function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}
</script>
</body>
在瀏覽器瀏覽 localhost:8086/index.html 點擊iframe頁面可以改變父類的顏色
就是這么easy
感謝各位的閱讀，以上就是“怎么用h5的postMessage方法iframe跨域消息傳遞的問題”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用h5的postMessage方法iframe跨域消息傳遞的問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
