美文网首页
window.postMessage()实现iframe跨域消息

window.postMessage()实现iframe跨域消息

作者: 依然_8deb | 来源:发表于2021-06-28 11:43 被阅读0次

    event对象有三个属性,分别是origin,data和source。
    event.data表示接发送过来的数据。
    event.origin表示postMessage的发送来源,包括协议,域名和端口;
    event.source表示消息源,消息的发送窗口/iframe。

    示例:A页面中包含一个iframe,iframe加载B页面
    父窗体与子窗体通信
    A页面(父窗体)代码:

    window.addEventListener('message', function(e) {// 监听 message 事件
          if (e.origin !== "https://www.runoob.com") {  // 验证消息来源地址
                return;
            }
      if (e.data.test=="Test") {
        alert(e.data.test);
      }
    }, false);
    

    B页面(子窗体)代码:

    btnClick: function (o, e) {
      window.parent.postMessage({ test: "Test"}, "*");
      //{ test: "Test" }为data属性,"*" 为origin属性
    }
    

    子窗体与父窗体通信
    A页面(父窗体)代码:

    function btnClick(o, e) {
    document.getElementById("iframeContent").contentWindow.postMessage({ test: "Test"});
    };
    

    B页面(子窗体)代码:

     window.addEventListener('message', function(e) {
      if (e.data.test=="Test") {
        alert(e.data.test);
      }
    }, false);
    

    相关文章

      网友评论

          本文标题:window.postMessage()实现iframe跨域消息

          本文链接:https://www.haomeiwen.com/subject/ymrqultx.html