如何实现iframe父子传参通信(2)

上面的代码其实很简单,在子页面里面获取了元素,该元素触发点击事件的时候,向父窗口发送一个消息,传递了一个消息;(这个消息参数会在接收页面的event.data查到);
在父页面监听message事件,监听到了就让登录遮罩消失;

父传子

同样,在父窗口也可以使用postMassage 来传递消息到子页面;

//父页面 <button>传递消息</button> <iframe src="https://www.jb51.net/子页面.html"></iframe> //子页面 <div></div> //父页面 <script> let oBtn=document.getElementById('btn'); let oFrame=document.getElementById('f'); oBtn.onclick=function(){ oFrame.contentWindow.postMessage('hello','*'); } </script> //子页面 <script> window.addEventListener('message',function(){ if(event.data=='hello'){ document.getElementById('#a').innerText=event.data; } }) </script>