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 ...
随机推荐
- 【PAT】B1009 说反话
在输入时直接分别将每个单词放入字符串,逆序输出字符串数组 #include<stdio.h> int main(){ int num=0; char ans[90][90]; while( ...
- 【PAT】 B1006 换个格式输出整数
超简单题 //直接将各位分开,分别用for循环输出 #include<stdio.h> int main(){ int num; scanf("%d",&num ...
- CISCO静态路由配置
静态路由:手动添加路由条目到路由表中 优点:没有额外的路由cpu负担,节约带宽,增加网络安全性. 缺点:必须去了解整个拓扑结构,如果网络拓扑发生变化,需要在所有r路由上手动修改路由表. 实验拓扑如下: ...
- 常见C语言内存错误
前言 C语言强大的原因之一在于几乎能掌控所有的细节,包括对内存的处理,什么时候使用内存,使用了多少内存,什么时候该释放内存,这都在程序员的掌控之中.而不像Java中,程序员是不需要花太多精力去处理垃圾 ...
- Spring的jdbc模板2:使用开源的连接池
上篇简要介绍了如何在spring中配置默认的连接池和jdbc模板,这篇来介绍开源的连接池配置与属性引入 C3P0连接池配置: 引入jar包 配置c3p0连接池 <?xml version=&qu ...
- Python3 实现简易局域网视频聊天工具
Python3 实现简易局域网视频聊天工具 1.环境 操作系统为 Ubuntu 16.04 python 3.5opencv-python 3.4.1.15numpy 1.14.5PyAudio ...
- 【大数据技术】Hadoop三大组件架构原理(HDFS-YARN-MapReduce)
目前,Hadoop还只是数据仓库产品的一个补充,和数据仓库一起构建混搭架构为上层应用联合提供服务. Hadoop集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起. ...
- http: server gave HTTP response to HTTPS client & Get https://192.168.2.119/v2/: dial tcp 192.168.2.119:443: getsockopt: connection refused
http: server gave HTTP response to HTTPS client 出现这问题的原因是:Docker自从1.3.X之后docker registry交互默认使用的是HTTP ...
- tomcat 设置虚拟路径的4种方法
通常使用方法1或者方法2 方法1 (添加配置文件):推荐使用,不需要重启服务器 在Tomcat根目录下的/conf/Catalina/localhost/ 路径下新建一个filename.xml,并 ...
- echarts 中国地图实现 省、市、区县三级联动,省级下钻、市级下钻
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 效果如下图: 每天学习一点点 编程PDF电子书.视频教程免费下载:http://www ...