公司某个功能用的是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. 开发nginx启动脚本及开机自启管理(case)

    往往我们在工作中需要自行写一些脚本来管理服务,一旦服务异常或宕机等问题,脚本无法自行管理,当然我们可以写定时任务或将需要管理的脚本加入自启等方法来避免这种尴尬的事情,case适用与写启动脚本,下面给大 ...

  2. February 19th, 2018 Week 8th Monday

    Love is blind, hard to find, difficult to get, and impossible to forget. 爱,很盲目,很难找,很难得,很难忘. It is al ...

  3. Unity Shader 基础(2) Image Effect

    Unity中 Image Effect 是Post Processing的一种方,Unity自身也提供很多Effect效果供使用.Image Effect的使用官方文档做了很多介绍,这里重点Post ...

  4. python3编写网络爬虫15-Splash的使用

    Splash是一个JavaScript渲染服务 是一个带有HTTP API的轻量级浏览器 同时对接了python的Twisted 和QT库 利用它可以实现对动态渲染页面的抓取 功能介绍 1.异步方式处 ...

  5. Angular中$watch实现控件改变后实时发送HTTP请求

    实现代码如下 <!DOCTYPE html> <html ng-app="myServiceApp"> <head> <meta char ...

  6. 转://WITH AS and materialize hints

    WITH AS: 就是将一个子查询部分独立出来,有时候是为了提高SQL语句的可读性,有时候是为了提高SQL语句性能. 如果一个SQL语句中,某个表会被访问多次,而且每次访问的限制条件一样的话,就可以使 ...

  7. ③---Java项目管理工具MAVEN安装与配置

    Java项目管理工具MAVEN安装配置以下将为大家介绍Java项目管理工具MAVEN安装及其配置. 一.下载MAVEN安装文件 maven下载地址:https://maven.apache.org/d ...

  8. Spring Security(二十六):8. Spring Security Community

    8.1 Issue Tracking Spring Security uses JIRA to manage bug reports and enhancement requests. If you ...

  9. RMQ问题--范围最小值问题

    范围最小值问题(Range Minium Query,RMQ)---RMQ问题 一.一维问题 给出一个n个元素的数组A1,A2,...,An, 设计一个数据结构, 支持查询操作Query(L,R):计 ...

  10. Vue学习-基本指令

    一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...