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跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
随机推荐
- 成就PHP高手的五个必由之路
亲们,此文时转载过来的,不是原创!特此说明一下 原文名称:5 ways to be a better php developer原文链接:http://www.developertutorials.c ...
- 通过Java代码实现对数据库的数据进行操作：增删改查
在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao xingming xue ...
- HTML5 数据集属性dataset
有时候在HTML元素上绑定一些额外信息,特别是JS选取操作这些元素时特别有帮助.通常我们会使用getAttribute()和setAttribute()来读和写非标题属性的值.但为此付出的代价是文档将 ...
- htm常用标签总结
1.结构性定义 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文 ...
- 解决mysql卸载后无法从新安装，卡在最后一步的问题
mysql服务出现问题往往是最麻烦的,往往需要重装,而重装很多人卸不干净残留文件,更加装不上.在下就遇到这个问题.重装mysql到最后一步时卡在了最后一步的第二条上 解决办法就是卸载后删注册表+删数据 ...
- UTFGrid
UTFGrid UTFGrid is a specification for rasterized interaction data. As of version 1.2, it was remove ...
- Linux2.6内核进程调度系列--scheduler_tick()函数3.更新普通进程的时间片
RT /** * 运行到此,说明进程是普通进程.现在开始更新普通进程的时间片. */ /* 首先递减普通进程的时间片计数器.如果用完,继续执行以下操作 */ if (!--p->time_sli ...
- nginx启动、关闭、重启
1.启动 [root@localhost local]# nginx/sbin/nginx #启动 [root@localhost local]# nginx/sbin/nginx -t #检查配置文 ...
- Eclipse for Java EE软件操作集锦（一）
以下是我在Java网站开发过程中,关于软件操作Eclipse中,遇到的一些问题并提供了解决方案.一.java web开发使用的集成开发工具是eclipse for Java EE 官方下载地址:htt ...
- GreenPlum高效去除表重复数据
1.针对PostgreSQL数据库表的去重复方法基本有三种,这是在网上查找的方法,在附录1给出.但是这些方法对GreenPlum来说都不管用. 2.数据表分布在不同的节点上,每个节点的ctid是唯一的 ...