zoukankan      html  css  js  c++  java
  • iframe之间通信

    如题:网页嵌套一个iframe,这个iframe有自己的window对象,有自己的store,数据互不干扰,美滋滋;

    但也正因为数据互不干扰,通信就成了难题。

    今天记录下跨iframe调用的操作:

    1. 在window上注册方法,在子iframe中调用:

      父页面:window["messageStr"]=function(arg){console.log(arg)};

      子页面:window.parent.messageStr("from child");// 但记得try catch;

      特点:简单,嘻嘻

    2. 用postMessage方法

      父页面:

    window.addEventListener("message",(event)=>{
         console.log("event >>: ", event);
    });

      子页面:

    try {
        let win = window.parent;
        console.log("win>>: ", win);
        win.postMessage({data:1},“*”);
    } catch (error) {
        console.log("error >>: ", error);
    }

      特点:对于多层不同域名嵌套就不灵了,lz恰好遇见这种情况。

    3. 方法2的增强版:

      父页面写法不变;

      子页面加上域名:

            try {
                let win = window.parent;
                const origin = win.location.origin;
                win.postMessage({data:1},origin);
            } catch (error) {
                console.log("error >>: ", error);
            }

    over!

  • 相关阅读:
    ubuntu下手动安装autoconf
    解决VMware下的ubuntu桌面鼠标键盘失效的问题
    DP搬运工1
    把数字转换成货币格式
    指定字符隐藏
    JS 时间获取 (常用)
    electron 安装
    el-form表单校验包含循环
    算法-07| 动态规划
    纯手撸——归并排序
  • 原文地址:https://www.cnblogs.com/rainbowLover/p/14279130.html
Copyright © 2011-2022 走看看