zoukankan      html  css  js  c++  java
  • iframe跨域解决方案

        公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面跳转和刷新,每次都得刷一下页面,而消息发送成功页的一个定位到顶部的功能,就是由于页面刷了一次导致体验不好,除了体验,这种中间页跳转的做法也很蹩脚和繁琐。

        昨天网上Get了一下iframe的跨域解决方案 找到了一个方法!

        postMessage,通过postMessage可以实现iframe的跨域通信。原理是子页面向父页面发送消息,父页面接收消息。

        话不多说直接干货。

        子页面代码:

    top.postMessage('success', '在这里填写父页面URL');

        父页面代码:

        //响应事件
        window.addEventListener('message', function (e) {
            var color = e.data;
            console.log(color);
            if (color == "success")
            {
                $("#MessageSend").height(600);
                $(window).scrollTop(0);
            }
        }, false);

        如上,子页面向父页面发送了一条消息 “success”,父页面获取消息后判断消息内容是不是想要的,进而做相应的操作。

        上面的代码还应该完善一下,父页面接收消息请求的时候,应该验证域名,总不能随便一个页面发来消息这边就处理。

  • 相关阅读:
    树莓派开机启动
    树莓派连接18b20测温度
    树莓派VNC
    树莓派python 控制GPIO
    树莓派笔记
    用nohup执行python程序时,print无法输出
    mysql 函数应用
    mysql 正则表达式判断是否数字
    mysql select into 不支持
    tushare
  • 原文地址:https://www.cnblogs.com/sunshine-wy/p/8891033.html
Copyright © 2011-2022 走看看