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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python Flask基础教程示例代码
2018/02/07 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python 用下标截取字符串的实例
2018/12/25 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
护理职业生涯规划书
2014/01/24 职场文书
趣味比赛活动方案
2014/02/15 职场文书
运动会入场式解说词
2014/02/18 职场文书
出生证明公证书
2014/04/09 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
高一军训口号
2015/12/25 职场文书
Python基础之hashlib模块详解
2021/05/06 Python