zoukankan      html  css  js  c++  java
  • 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 ======
    Talk is cheap, show me the code.
  • 相关阅读:
    Azure 虚拟机安全加固整理
    AzureARM 使用 powershell 扩容系统磁盘大小
    Azure Linux 云主机使用Root超级用户登录
    Open edX 配置 O365 SMTP
    powershell 根据错误GUID查寻错误详情
    azure 创建redhat镜像帮助
    Azure Powershell blob中指定的vhd创建虚拟机
    Azure Powershell 获取可用镜像 PublisherName,Offer,Skus,Version
    Power BI 连接到 Azure 账单,自动生成报表,可刷新
    Azure powershell 获取 vmSize 可用列表的命令
  • 原文地址:https://www.cnblogs.com/cidgur/p/12887716.html
Copyright © 2011-2022 走看看