iframe和父级页之间的通信
来源:互联网 发布:阿里云服务器部署项目 编辑:程序博客网 时间:2024/05/18 01:16
iframe和父级页之间的通信
记录一下产品界面中iframe的通信与操作问题:
一、iframe和父级之间(简单)
iframe可以通过parent或top来找到父级页面,父级页面也可以很容易找到iframe。
二、iframe和iframe之间(复杂一些)
如果页面中有两个iframe:A和B,那么在A页面中可以通过parent.B来找到B,反之亦然。
但是,这样会有一个问题,如果parent.B名称变了或者根本就没有parent.B咋办呢,难道去修改A要加载的N个页面的JS?所以上面的方法并不靠谱,虽然能很快的解决问题,但有很大的隐患。
产品中使用了比这要靠谱很多的方法:
在主页面中,设定一个变量C(当然C可以是普通的全局变量,也可以是某个自定义对象的属性);
A加载页面时,执行 parent.C = window ,将主页面的C指向A;
这样B中,就可以通过parent.C来访问A。
这样最大的好处就是不用依赖于iframe的name了,得到很大的解放。
同理,多层iframe嵌套,任意iframe之间都可以用该方法访问,相当强大
三.通信方式
1.在iframe中调用本窗口的控件
2.在iframe中调用父窗口的控件
3.在父窗口中调用iframe中的控件
4.在iframe中调用其他iframe的控件
window.parent--指示父窗口对象
举例
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<script type="text/javascript">
function abc(id){
alert(id);
}
</script>
<form id="form1" runat="server">
<div>
<iframe id="iframes" src="abc.htm" width="500" height="480" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
</div>
</form>
</body>
</html>
abc.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div>
<a href="javascript:void(0)" onclick="test();">asdfasdf</a>
</div>
<script type="text/javascript">
function test()
{
parent.abc('斯蒂芬森');
}
</script>
</body>
</html>
- iframe和父级页之间的通信
- iframe和父级页之间的通信
- iframe之间的通信与操作
- iframe之间的通信与操作
- iframe之间的通信与操作 .
- 如何在iframe之间通信
- 嵌套iframe下父子页面之间的通信
- 自适应 和 iframe 父子之间的调用
- JavaScript:父子页面(iframe)之间通信实例
- iframe页面和父页面之间元素查找的方法
- 父页面和iframe页面之间方法的互相调用
- 利用iframe进行父页面和子页面的通信
- 嵌套iframe下父子页面之间的通信(跨域及同域的分析)
- iframe 通信和跨域通信
- 关于iframe和母页以及iframe之间的jquery控制
- js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度
- Applet 和 Servlet 之间的通信
- java 和 Flex 之间的Socket通信
- Tomcat内存溢出(java.lang.OutOfMemoryError: PermGen space)的解决办法
- 四元数(1) 四元数与欧拉角之间的转换
- 四元数2
- Firebug入门指南
- 【读书笔记】CDC-设计中的逻辑思维
- iframe和父级页之间的通信
- 【项目那些事儿】项目常总结2013.7.6
- Strings of Power
- 在Excel2003中按颜色进行排序
- 谷歌浏览器开发工具使用教程
- pku 1511 Invitation Cards(最短路径)
- 毕业两年总结
- 编程之“与、或(&|)”的使用技巧
- 博客小技巧