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>
时间： 2024-10-04 15:34:26