postMessage跨域、跨iframe窗口消息传递

2021-3-18    前端达人

文章目录

  1. 作用
  2. 语法
  3. 使用
  4. 兼容性
  5. 应用场景

    说起postMessage 可能平时大家也不遇到，但是如果遇到问题了，又想不起它，这里记录下防止后面忘记它。




  6. 作用

    window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。



    通常情况下，受浏览器“同源策略”的限制跨域问题一直是个问题，window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。


  7. 语法

    一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件，传递给window.postMessage()的参数通过事件对象暴露给接收窗口。



    基本语法：



    targetWindow.postMessage(message, targetOrigin, [transfer]);

    1

    targetWindow

    targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括：



    Window.open

    Window.opener

    HTMLIFrameElement.contentWindow

    Window.parent

    Window.frames +索引值

    message

    要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。



    targetOrigin

    定目标窗口的来源，必须与消息发送目标相一致，可以是字符串或URI。 表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。如果为"*"则都可以接收。



    transfer

    可选属性。是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。


  8. 使用

    postMessage程序



    var receiver = document.getElementById('receiver').contentWindow;

    var btn = document.getElementById('send');

    btn.addEventListener('click', function (e) {

        e.preventDefault();

        var val = document.getElementById('text').value;

        receiver.postMessage("Hello "+val+"！", "http://www.xxx.com");

    }); 



    接收端



    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event){

      if (event.origin !== "http://www.xxx.com")

        return;

    }



    event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。


  9. 兼容性



    总体兼容性还是很好的！




  10. 应用场景

    跨域通信(包括GET请求和POST请求)

    WebWorker

    vue项目中使用到了iframe并且需要传递参数



    ————————————————

    版权声明：本文为CSDN博主「zy1281539626」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

    原文链接：https://blog.csdn.net/zy1281539626/article/details/114934551


    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


分享本文至：
« 流量分发与产品设计 SpringBoot与Web开发 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档