【h5】h5數據跨域交換postMessage用法
阿新 • • 發佈：2017-09-24
回來 log char -a frame 返回 message https 能夠
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>
【h5】h5數據跨域交換postMessage用法