下面是一个iframe和父页面相互通信的demo,其中使用了一个非常方便的方法postMessage,但是有时候,我们的子页面可能会包含其他业务逻辑,这里面如果也用到了postMessage,就难免会产生冲突,这时候,我们可以使用自定义事件来解决。
关于自定义事件的内容,可以点此查看,相信聪明的你,有能力实现使用自定义事件来进行iframe通信。
- iframe给父页面发送消息
父页面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <iframe src="./iframe.html"></iframe> </body> <script type="text/javascript"> window.addEventListener('message',function(event){ //此处执行事件 console.log(event.data); }) </script> </html>
iframe代码
<!DOCTYPE html> <html> <head> <title>iframe</title> </head> <body> <button onclick="clickHere();">hahaha</button> </body> <script type="text/javascript"> function clickHere() { window.parent.postMessage({"click":true},'*'); } </script> </html>
- 父页面给iframe发送消息
父页面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> </head> <body> <button onclick="clickHere();">hahaha</button> <iframe src="./iframe.html" id='iframeId'></iframe> </body> <script type="text/javascript"> function clickHere() { var frame = document.getElementById('iframeId'); frame.contentWindow.postMessage({"click":true},'*'); } </script> </html>
iframe代码
<!DOCTYPE html> <html> <head> <title>iframe</title> </head> <body> </body> <script type="text/javascript"> window.addEventListener('message',function(event){ //此处执行事件 console.log(event.data); }) </script> </html>
感谢分享,好像见过你哎
不错