ifame 与父页面进行数据交互(跨域)

Posted cidgur

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ifame 与父页面进行数据交互(跨域)相关的知识,希望对你有一定的参考价值。

解决的方法主要是 通过使用 “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 ======

 

以上是关于ifame 与父页面进行数据交互(跨域)的主要内容,如果未能解决你的问题,请参考以下文章

不同域iframe主动与父容器通讯的方法

iframe与父页面之间通讯跨域问题

在IFrame中使用postMessage跨域

PostMessager来对子父窗体进行跨域

嵌入式iframe子页面与父页面js通信方式

JSONP跨域请求