公司某个功能用的是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”,父页面获取消息后判断消息内容是不是想要的,进而做相应的操作。

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

iframe跨域解决方案的更多相关文章

  1. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  2. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  4. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  5. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

  6. IFrame跨域访问&&IFrame跨域访问自定义高度

    1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...

  7. JSON跨域解决方案收集

    最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...

  8. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  9. Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持

    Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致  推荐1 2. Apache 反向代理 推荐1 ...

随机推荐

  1. c/c++ 通用的(泛型)算法 之 只读算法,写算法,排序算法

    通用的(泛型)算法 之 只读算法,写算法,排序算法 只读算法: 函数名 功能描述 accumulate 求容器里元素的和 equal 比较2个容器里的元素 写算法 函数名 功能描述 fill 用给定值 ...

  2. win10同时安装 office2016和visio2016

    一.下载镜像文件 因为office 2016和 visio2016 镜像文件是一样的,只是名称不一样,所以只需要下载一个即可. 二.下载Office 2016 Deployment Tool工具 到微 ...

  3. PHP实现类似题库抽题效果

    PHP实现类似题库抽题效果 大家好,我顾某人又回来了,最近学了一点PHP,然后就想写个简单小例子试试,于是就写了一个类似于从题库抽题的东西,大概就是先输入需要抽题的数量,然后从数据库中随机抽取题目. ...

  4. 【算法】LeetCode算法题-Implement strStr

    这是悦乐书的第151次更新,第153篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第10题(顺位题号是28).给定两个任意字符串haystack.needle,返回hay ...

  5. java中伪共享问题

    伪共享(False Sharing) 原文地址:http://ifeve.com/false-sharing/ 作者:Martin Thompson  译者:丁一 缓存系统中是以缓存行(cache l ...

  6. centos7下如何隐藏nginx的版本号

    我们在访问nginx的时候会暴露nginx的版本号,如何将这些版本号隐藏呢? 其实隐藏版本号非常简单 在nginx的配置文件中添加一个server——tokens  off:参数就可以了,下面进行操作 ...

  7. centos7下kubernetes(2。kubernetes---start,重要概念)

    Cluster cluster是计算,存储和网络资源的集合,kubernetes是利用这些资源运行各种基于容器的应用 Master Master是cluster的大脑,他的主要职责是调度,即决定应用在 ...

  8. git pull request 流程

    git pull request 用于在 fork 官方 repo 到个人 github, 在本地修改后,向官方 repo 请求合并.在官方团队审查过代码后,就可以将自己所做的改动合并到官方 repo ...

  9. Leetcode:0002(两数之和)

    LeetCode:0002(两数之和) 题目描述:给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表.你可以假设除了数字 0 之外,这两 ...

  10. Linux 平台下 RMAN 全备 和 增量备份 shell 脚本

    转:http://blog.csdn.net/tianlesoftware/article/details/5740630 全备脚本 以 nocatalog 模式为例: Shell 脚本: ##### ...