h5h5数据跨域交换postMessage用法
Posted carsonwuu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5h5数据跨域交换postMessage用法相关的知识，希望对你有一定的参考价值。
h5数据跨域交换postMessage用法
1、与通过window.open()打开的新窗口跨域数据交换，代码如下：
（1）源窗口
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>源窗口</title> 6 </head> 7 <body> 8 <button id="btn">打开新窗口跨域交换数据</button> 9 <p>我接收到来自新窗口的数据为：<span id="msg" style="color: red;"></span></p> 10 <script> 11 document.getElementById(‘btn‘).onclick =function() { 12 var newWindow =window.open(‘https://wenyang12.github.io/demo/postmsg/index.html‘); 13 //注册监听信息事件，看看是否有数据发送过来 14 window.addEventListener(‘message‘, function (e) { 15 if(e.data===‘true‘){//要是新窗口有数据返回过来，说明新窗口已经完全加载。然后才能够给新窗口发送数据 16 newWindow.postMessage(‘hello world!‘, e.origin);//给新窗口发送数据 17 console.log(e);//打印新窗口返回来的数据 18 document.getElementById(‘msg‘).innerHTML = e.data; 19 } 20 }); 21 }; 22 </script> 23 </body> 24 </html>
（2）子窗口
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>XDM（跨文档消息传递）</title> 6 </head> 7 <body> 8 <h1>我是新窗口</h1> 9 <p>我接收到来自源窗口的数据为：<span id="msg" style="color: red;"></span></p> 10 <script> 11 window.opener.postMessage(‘true‘, ‘http://www.qdfuns.com‘);//发送一个数据给源窗口，用于判断通过open打开的窗口是否装载完成。 12 /*监听看有没有数据发送过来*/ 13 window.addEventListener(‘message‘,function(e) { 14 if(e.origin !== "http://www.qdfuns.com"){ // 判断数据发送方是否是可靠的地址 15 return 16 } 17 console.log(e);//打印接收到的数据对象 18 document.getElementById(‘msg‘).innerHTML = e.data; 19 }) 20 21 </script> 22 </body> 23 </html>
2、与通过自身的iframe加载进来的页面进行跨域交换数据，代码如下：
（1）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>跨域交互数据-iframe</title> 6 </head> 7 <body> 8 <h1>跨域交互数据-iframe</h1> 9 <p>我接收到来自iframe的数据为：<span id="msg" style="color: red;"></span></p> 10 <iframe src="https://wenyang12.github.io/demo/postmsg/iframe.html"></iframe> 11 <script> 12 13 window.onload =function() { 14 /*向目标源发送数据*/ 15 window.frames[0].postMessage(‘收到请回！‘,‘https://wenyang12.github.io‘); 16 /*监听有没有返回过来的数据*/ 17 window.addEventListener(‘message‘,function(e) { 18 console.log(e); 19 document.getElementById(‘msg‘).innerHTML = e.data; 20 }) 21 }; 22 23 </script> 24 </body> 25 </html>
（2）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>iframe</title> 6 </head> 7 <body> 8 <p>我是iframe</p> 9 <p>我接收到到的数据为：<span id="msg" style="color: red;"></span></p> 10 <script> 11 /*监听看有没有数据发送过来*/ 12 window.addEventListener(‘message‘,function(e) { 13 if(e.origin !== "http://www.qdfuns.com"){ // 判断数据发送方是否是可靠的地址 14 return 15 } 16 console.log(e);//打印接收到的数据对象 17 document.getElementById(‘msg‘).innerHTML = e.data; 18 /*回发数据*/ 19 e.source.postMessage(‘hello world‘, e.origin); 20 }) 21 22 23 </script> 24 </body> 25 </html>
以上是关于h5h5数据跨域交换postMessage用法的主要内容，如果未能解决你的问题，请参考以下文章
sendmessage、postmessage和直接调用该对话框的方法，有何区别，那个好一点？