【h5】h5数据跨域交换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>

 

 

posted @ 2017-09-24 01:42  carsonwuu  阅读(562)  评论(0)    收藏  举报