html父子页面iframe双向动员静的实现示例
|
某天，率领提了一个需求，主页面内里嵌套iframe，父子页面双向发送动静。然后我就提了一个方案： postMessage 常识理论筹备： postMessage要领应承来自差异源的剧本回收异步方法举办有限的通讯，可以实现跨文本档、多窗口、跨域动静转达。 语法： otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow：其他窗口的引用，如 iframe的contentWindow、执行window.open返回的窗口工具、可能是定名过或数值索引的window.frames。 message：将要发送到其他window的数据。 targetOrigin：指定那些窗口能吸取到动静变乱，其值可所以字符串 “*” 暗示无穷制，可能是一个URI。 transfer：是一串和message同时转达的Transferable工具，这些工具的全部权将被转移给动静的吸取方，而发送方将不再保存全部权。 postMessage要领被挪用时，会在全部页面剧本执行完毕之后像方针窗口派发一个 MessageEvent 动静，该MessageEvent动静有四个属性必要留意： type：暗示该message的范例 data：为 postMessage 的第一个参数 origin：暗示挪用postMessage要领窗口的源 source：记录挪用postMessage要领的窗口工具 操纵流程如下： 1.筹备两个页面 主页面 嵌套页面 main.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage 跨域通讯 主页面</title> </head> <body> <h1>主页面</h1> <iframe id="child" src=http://www.jb51.net/web/"http:/b.com/iframepage.html"></iframe> <div> <h2>主页面吸取动静地区</h2> <span id="message"></span> </div> </body> </html> iframepage.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage跨域通讯 子页面</title> </head> <body> <h2>子页面</h2> <div> <h3>吸取动静地区</h3> <span id="message"></span> </div> </body> </html> 2、父向子发送动静 main.html <script> window.onload = function(){ document.getElementById('child') .contentWindow.postMessage("主页面动静", "") } </script> 留意： 必然是页面加载完成后在发送动静，不然会由于 iframe 未加载完成报错。 Failed to execute ‘postMessage’ on ‘DOMWindow’ 子页面吸取动静： iframepage.html <script> window.addEventListener('message',function(event){ console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "动静：" + event.data; }, false); </script> 此时可看到页面中，iframe的子页面中打印了 收到动静：主页面动静` 以及节制台打印了MessageEvent工具。 3、子向父发送动静 子页收到动静后回覆父页面 iframepage.html <script> window.addEventListener('message',function(event){ console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "动静：" + event.data; top.postMessage("子页面动静收到", 'http://a.com/main.html') }, false); </script> 父页面收到动静并表现： window.addEventListener('message', function(event){ document.getElementById('message').innerHTML = "收到" + event.origin + "动静：" + event.data; }, false); 4、完备代码 main.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage 跨域通讯 主页面</title> </head> <body> <h1>主页面</h1> <iframe id="child" src=http://www.jb51.net/web/"http:/b.com/iframepage.html"></iframe> <div> <h2>主页面吸取动静地区</h2> <span id="message"></span> </div> </body> <script> window.onload = function(){ document.getElementById('child') .contentWindow.postMessage("主页面动静", "") } window.addEventListener('message', function(event){ document.getElementById('message').innerHTML = "收到" + event.origin + "动静：" + event.data; }, false); </script> </html> iframepage.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage跨域通讯 子页面</title> </head> <body> <h2>子页面</h2> <div> <h3>吸取动静地区</h3> <span id="message"></span> </div> </body> <script> window.addEventListener('message',function(event){ if(window.parent !== event.source){return} console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "动静：" + event.data; top.postMessage("子页面动静收到", 'http://a.com/main.html') }, false); </script> </html> 到此这篇关于html父子页面iframe双向动员静的实现示例的文章就先容到这了,更多相干html父子页面iframe双向动员静内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
