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 相关文章推荐
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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 Xdebug的安装与使用详解
2013/06/20 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
Python实现发送email的几种常用方法
2014/08/18 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
对numpy中轴与维度的理解
2018/04/18 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python devel安装失败问题解决方案
2020/06/09 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
事业单位聘任报告
2015/03/02 职场文书
铁人观后感
2015/06/16 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书