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”,父页面获取消息后判断消息内容是不是想要的,进而做相应的操作。
上面的代码还应该完善一下,父页面接收消息请求的时候,应该验证域名,总不能随便一个页面发来消息这边就处理。
iframe跨域解决方案的更多相关文章
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- JSON跨域解决方案收集
最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...
- 子页面iframe跨域执行父页面定义的JS方法
问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...
- Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致 推荐1 2. Apache 反向代理 推荐1 ...
随机推荐
- php学习----运算符
PHP 1.运算符 加减乘除与数学运算无异 但PHP的赋值运算符有两种,分别是: (1)"=":把右边表达式的值赋给左边的运算数.它将右边表达式值复制一份,交给左边的运算数.换而言 ...
- LeetCode算法题-Single Number(Java实现)
这是悦乐书的第175次更新,第177篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第34题(顺位题号是136).给定一个非空的整数数组,除了一个元素外,每个元素都会出现两 ...
- LeetCode算法题-Binary Tree Level Order Traversal II(Java实现)
这是悦乐书的第165次更新,第167篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第24题(顺位题号是107).给定二叉树,返回其节点值的自下而上级别顺序遍历(即从左到右 ...
- (转)Spring Boot (十四): Spring Boot 整合 Shiro-登录认证和权限管理
http://www.ityouknow.com/springboot/2017/06/26/spring-boot-shiro.html 这篇文章我们来学习如何使用 Spring Boot 集成 A ...
- SQLite中的WAL机制详细介绍-与回滚日志原理
一.什么是WAL? WAL的全称是Write Ahead Logging,它是很多数据库中用于实现原子事务的一种机制,SQLite在3.7.0版本引入了该特性. 二.WAL如何工作? 在引入WAL机制 ...
- java 关于打断点
比如:前台传过来参数中文乱码,需要decode才可以使用, 判断问题. debug 在 DispatcherServlet OncePerRequestFilter 打断点, 查看前台过来的中文在哪里 ...
- 转://如何增加linux根目录的磁盘空间(基于LVM)?
问题引出: 在测试过程中替换so文件,报磁盘空间不足的错误. ▲问题分析: 由于当时系统部署架构的考虑,把软件和数据库部署在了同一台机器上,并且给了30G的磁盘空间.系统上占用磁盘空间的有2部分,一是 ...
- P1024 一元三次方程求解(二分答案)
思路: 求这个根,然后有一个关键的条件|x1-x2|>=1,然后就是从-100,枚举到+100,每次二分(i, i+1)注意如果f(i)*f(i+1)>0则不进行二分,如果,你觉得这样的值 ...
- GitHub存储库泄露了API令牌和加密密钥
导读 北卡罗莱纳州立大学(NCSU)学者的一项研究表明,一些GitHub存储库泄漏API令牌和密码密钥.研究人员分析了分布在数百万存储库中的10亿多个GitHub文件.研究人员使用GitHub搜索AP ...
- 444 D. Ratings and Reality Shows
一个模特有两种活动. ① 拍照片,挣钱 a. ②开演唱会,花费b 给定模特这两种工作的时间表. 模特可以选定一个时间举办一个座谈会,那么他拍照片的钱变c.开演唱会会花费d. 要求在模特座谈会之前和后l ...