iframe 跨域相互操作
我们在开发后台管理系统时可能会经常要跟 iframe 打交道，因为现在大部分后台管理系统都是页面内嵌iframe，所以有时候两者之间就难免要互相通信,但浏览器为了安全的原因，所以就禁止了不同域的访问，所以现在我们就用一种简单通俗的办法解决这个问题：
a页面和c页面都是 www.aaa.com域名下的，b页面是www.bbb.com域名下的，a页面内嵌的iframe是b页面，如果现在b页面想调用a页面的方法，那么就需要在b页面动态创建一个iframe而这个iframe就是c页面，c页面需要和a页面在同一个域名下，如下图所示：
a.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>www.aaa.com页面下a.html</title>
<script type="text/javascript">
function alerFun(){
alert('我是www.aaa.com域名下 a页面的方法');
}
</script>
</head> <body>
<div>www.aaa.con-------a.html</div><br>
<iframe src="http://127.0.0.1/iframe/kuayu/b.html" name="myframe" width="500" height="100"></iframe>
</body>
</html>
b.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>www.bbb.com域名下b页面</title>
<script type="text/javascript">
function creatFrame(){
if(typeof(oFrame)=='undefined'){
oFrame = document.createElement('iframe');
oFrame.src = 'http://localhost/iframe/kuayu/c.html';
oFrame.style.display = 'none';
document.body.appendChild(oFrame);
}else{
oFrame.src = 'http://localhost/iframe/kuayu/c.html?' + Math.random();
}
}
</script>
</head> <body>
<div>www.bbb.con-------b.html</div>
<div><input type="button" value="调用a页面的方法" onclick="creatFrame()"></div>
</body>
</html>
c.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>www.aaa.com页面下c.html</title>
</head> <body>
<script type="text/javascript">
parent.parent.alerFun();
</script>
</body>
</html>
c页面其实就是一个自执行函数，当创建这个页面时就会自动执行同域下a页面里的函数，所以我们就可以在b页面通过中间层C页面来调用父框架a页面的方法了~
效果图如下：
同理如果想让a页面调用b页面的方法也是如此，剩下的就自己动手试试吧~
iframe 跨域相互操作的更多相关文章
- iframe与主框架跨域相互访问方法【转】
转自:http://blog.csdn.net/fdipzone/article/details/17619673 1.同域相互访问 假设A.html 与 b.html domain都是localho ...
- iframe与主框架跨域相互访问方法
iframe 与主框架相互访问方法 http://blog.csdn.net/fdipzone/article/details/17619673/ 1.同域相互访问 假设A.html 与 b.htm ...
- Javascript使用postMessage对iframe跨域通信
今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...
- iFrame跨域的方式
4种通过iframe跨域与其他页面通信的方式 不同域下的iframe不能进行操作. 1.location.hash: 在url中,http://www.baidu.com#helloword的#hel ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie
1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
随机推荐
- Atitit.异步编程技术原理与实践attilax总结
Atitit.异步编程技术原理与实践attilax总结 1. 俩种实现模式 类库方式,以及语言方式,java futuretask ,c# await1 2. 事件(中断)机制1 3. Await 模 ...
- 漫谈Nuclear Web组件化入门篇
目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...
- 打造自定Select样式
打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...
- 【代码笔记】iOS-正在加载
一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...
- mac maven
下载Maven 下载地址 : https://maven.apache.org/download.cgi 解压zip包到指定目录 例如: /Users/Walid/Desktop/develop/to ...
- 使用c/c++扩展python
用python脚本写应用比较方便,但有时候由于种种原因需要扩展python(比如给程序提供python接口等). 之前一直想整理下,今天终于坐下来把这件事情给做了,这里记录下,也方便我以后查阅. 说明 ...
- j2ee项目服务器怎样部署？
1.右击项目 >> 点击如图1中❶ >> Project(选择项目) >> Add 如图1: 图1 2.点击Add >> Server ...
- Linux系统下面挂载u盘
1.先插好u盘到Linux服务器,然后查看u盘挂载到哪个目录下面. [root@localhost ~]# /sbin/fdisk -l 2.挂载到u目录下面 [root@localhost ~]# ...
- python安装后推荐的安装两款文本编辑器
Notepad++ 7.2.2和 Sublime Text --道心 Notepad++ 7.2.2 Notepad++ 是一款非常有特色的编辑器,是开源软件,可以免费使用.支持的语言: C, C++ ...
- 自己解决虚拟机Ubuntu开机黑屏
Virtual Box+Ubuntu 64bit,之前都能好好用,但昨天一打开,过了开始的一个选择界面(有什么恢复模式那个)就黑了,左上角的光标不闪,一直卡在那里,后来发现原因了. 1.先下载LeoM ...