• 【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>

     

  • 相关阅读:
    Sobel算子 (转)
    由矩阵运算来看初等矩阵的左乘右乘所影响到矩阵的行列变换的本质(转)
    矩阵的迹(转)
    深度神经网络识别图形图像的基本原理(转)
    图解卷积神经网络(二)(转)
    Matlab 的reshape函数(转)
    iOS关键词weak和assign的区别
    网络层HTPPS和HTTP的概念与区别
    iOS开发之#impor与#include的区别
    iOS制作自己的Framework框架
  • 原文地址:https://www.cnblogs.com/carsonwuu/p/7583924.html
Copyright © 2020-2023  润新知