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 ...
随机推荐
- VS调式时出现异常,在输入法是中文状态下,输入框输入字母再回车,会造成页面关闭,vs退出调式
解决方案:关闭浏览器窗口关闭时,停止调试 .就恢复正常,无异常
- AI学习---数据IO操作&神经网络基础
数据IO操作 TF支持3种文件读取: 1.直接把数据保存到变量中 2.占位符配合feed_dict使用 3. QueueRunner(TF中特有的) 文件读取流程 文件读取流程(多线 ...
- 排序算法之快速排序的思想以及Java实现
1 基本思想 快速排序是在冒泡排序的基础上改进而来的,它是基于分治的思想.通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据 ...
- Linux 小知识翻译 - 「代理服务器」
这回聊聊「代理服务器」. 在公司里,不通过代理服务器无法连接互联网的,由于代理服务器的原因,有些服务的使用是受到限制的. 有人可能会觉得为什么会存在这种东西?(这里指代理服务器) Proxy本来的意思 ...
- java操作elasticsearch实现查询删除和查询所有
后期博客本人都只给出代码,具体的说明在代码中也有注释. 1.查询删除 //查询删除:将查询到的数据进行删除 @Test public void test8() throws UnknownHostEx ...
- Python虚拟环境笔记
虚拟环境 为什么需要虚拟环境: 到目前位置,我们所有的第三方包安装都是直接通过pip install xx的方式进行安装的,这样安装会将那个包安装到你的系统级的Python环境中.但是这样有一个问题, ...
- MySQL高级知识(十二)——全局查询日志
前言:全局查询日志用于保存所有的sql执行记录,该功能主要用于测试环境,在生产环境中永远不要开启该功能. 1.如何开启 #1.通过my.cnf配置开启该功能. 注:对my.cnf文件配置后,需重启my ...
- 禅道Bug等级划分标准
一.严重程序 P1:致命(该问题在测试中较少出现,一旦出现应立即中止当前版本测试) 阻碍开发或测试工作的问题:造成系统崩溃.死机.死循环,导致数据库数据丢失, 与数据库连接错误,主要功能丧失,基本模块 ...
- Java关键字(三)——static
我们说Java是一种面向对象编程的语言,而对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体,对同类对象抽象出其共性,便是Java中的类,我们可以用类描述世间万物,也可以说万物皆对象.但是 ...
- React-记connect的几种写法
第一种 最普通,最常见,delllee和官网第写法. import React, { Component } from 'react'; import {connect} from 'react-re ...