ifame 与父页面进行数据交互（跨域）

Posted 2021-02-19 cidgur

解决的方法主要是 通过使用 “Web API  window.postMessage()” 方法

1、postMessage 方法的详细介绍这里就不赘述了。

请参考比较权威的讲解 传送门

2、postMessage 的使用案例

// 官方的例子，这里就不再展示了，写一写自己使用的方法

// 一个消息管理的构造函数
function MessageManager() {
        var event;
        var that = this;
        // 处理消息    
        this.processMessage = function (ev) {};
        /**
        * 用于发送消息
        * @param string  msg  要发送的消息内容
        * @param obj otherWindow 接受消息的窗口（页面）的引用， 
        * 如果是window.open()打开的窗口，那么 otherWindow=window.open(), 
        * 如果是iframe, 那么 otherWindow=iframe.contentWindow
        * 如果不传此参数，那么会以上次接收到的消息的发送者作为引用
        * @param string target (可选) 接收消息窗口的 url，不写默认为 *
        */
        this.sendMessage = function (msg, otherWindow, target) {
            var w = otherWindow || event.source;
            var t = event ? event.origin : (target || ‘*‘);
            w.postMessage(msg, t);
        };

        // 在实例化当前构造函数的时候，顺便添加一个监听消息事件
        // 这个事件监听，主要用于接管 通过postMessage方法发送过来的消息
        window.addEventListener("message", function(ev) {
            // 保存本次接收到的事件对象
            event = ev;
            // 处理本次的事件
            that.processMessage(ev);
        }, false);
}


// ====== 父页面的用法，start ======

// 实例化一个消息管理的对象
var msgMng = new MessageManager();
// 接管处理消息方法, 用于接管iframe子页面发送来的消息
msgMng.processMessage = function (ev) {
    // ev.data 在消息事件中，data属性就是 发送的数据（对应message）,可以根据这个来做一系列判断和相应的操作
    console.log(ev, ev.data);
}

window.onload = function () {
    // 当父页面加载完成后，给每一个iframe子页面先通知一次
    var iframes = document.querySelectorAll(‘iframe‘);
    for (var i = 0; i < iframes.length; i++) {
        msgMng.sendMessage(‘notice‘, iframes[i].contentWindow);
    }
}

// 后序如果需要与iframe子页面进行交互，可以根据业务逻辑来调用  msgMng.sendMessage 方法
msgMng.sendMessage(‘hello‘, iframes[n]); // iframes[n]是代表 iframe 集合里其中一个

// ====== 父页面的用法，end ======



// ====== iframe子页面的用法，start ======

// 实例化一个消息管理的对象
var msgMng = new MessageManager();
// 接管处理消息方法, 用于接管父页面发送来的消息
msgMng.processMessage = function (ev) {
    // ev.data 在消息事件中，data属性就是 发送的数据（对应message）,可以根据这个来做一系列判断和相应的操作
    console.log(ev, ev.data);
}

// 如果需要父页面进行交互，可以根据业务逻辑来调用  msgMng.sendMessage 方法 
// 这里不传第二个参数，默认会以父页面做为窗口引用，是因为在父页面在加载完成后，就给每一个iframe子页面做了一次消息通知，当iframe子页面接收到消息后，会将消息事件保存. 
msgMng.sendMessage(‘hello‘);

// ====== iframe子页面的用法，end ======