javascript父、子页面交互技巧总结


Posted in Javascript onAugust 08, 2014

帧用来存放子页面,既可以是iframe,又可以是frameset。window对象是全局对象,页面上的一切函数和对象都在它的作用域里。
1、parent代表父窗口、如果父窗口又存在若干层嵌套,则top代表顶级父窗口。
self代表窗口自身。

if(self==top){//}判断窗口是否处于顶级 
if(self==parent){}//也可以

2.1、父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了。
帧最好设置name属性,这样操作最方便。如

<iframe name="test" src="child.html"></iframe>

假如要获取child.html里面id为'menu'的元素,则可以这样写:

window.frames["test"].document.getElementById('menu'); 
//由于所有的函数都存放在window对象里面,可去掉开头的window: 
frames["test"].document.getElementById('menu'); 
//在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写: 
test.document.getElementById('menu');

2.2 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里,同上,关键是获取该对象。

//假如child.html定义了showMesg函数,需要在父中调用,则这样写 
window.frames['test'].showMesg(); 
//简写形式 
test.showMesg(); 
//同理,对象也是如此访问 
alert(test.person);

2.3 其他获取document的方式。
先使用'document.getElementById()'或'document.getElementsByTagName()'把帧作为document下的Element获取,然后访问其属性contentDocument/contentWindow (iframe、frame特有),其中第一个ie7-不支持,第二个chrome不支持.

<iframe id="testId" src="child.html"></iframe> 
//====== 
var doc=document.getElementById('testId'); 
//或者 
var doc=document.getElementsByTagName('iframe')[0]; 
然后 
var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一 
if(winOrdoc.document)winOrdoc=winOrdoc.document; 
winOrdoc.getElementById('menu'); 
//如果需要window对象,则这样写: 
if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;

3.1子页面访问父页面元素。思路同2.1,先获取父窗口window.document对象

parent.window.document.getElementById('parentMenu'); 
//简写 
parent.document.getElementById('parentMenu');

3.2,子页面访问父页面函数或对象。思路同2.2,先获取父窗口window对象。

parent.parentFunction();

最后提一下js的同源策略,即位于A网站的js代码不允许访问位于B网站的内容,即使该代码来源于B网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。

Javascript 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
简明json介绍
Sep 28 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
jQuery的animate函数学习记录
Aug 08 #Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 #Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 #Javascript
js事件监听机制(事件捕获)总结
Aug 08 #Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 #Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 #Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 #Javascript
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
js微信支付实现代码
2016/12/22 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
用Python编写web API的教程
2015/04/30 Python
python rsa 加密解密
2017/03/20 Python
python 判断网络连通的实现方法
2018/04/22 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python学习笔记之多进程
2020/08/06 Python
python爬虫---requests库的用法详解
2020/09/28 Python
python中pyplot基础图标函数整理
2020/11/10 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
活动邀请函范文
2014/01/19 职场文书
生日主持词
2014/03/20 职场文书
付款承诺函范文
2015/01/21 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android