码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-14 13:03:21      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:title   完成后   实例   selector   ESS   process   ssm   通过   roc   

解决的方法主要是 通过使用 “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 与父页面进行数据交互(跨域)

标签:title   完成后   实例   selector   ESS   process   ssm   通过   roc   

原文地址:https://www.cnblogs.com/cidgur/p/12887716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!