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以及xml节点访问兼容问题
Nov 26 Javascript
js表格分页实现代码
Sep 18 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 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中使用PDF文档功能
2006/10/09 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
react-native动态切换tab组件的方法
2018/07/07 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python和C/C++交互的几种方法总结
2017/05/11 Python
python机器学习库常用汇总
2017/11/15 Python
python实现俄罗斯方块
2018/06/26 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
python-numpy-指数分布实例详解
2019/12/07 Python
如何通过命令行进入python
2020/07/06 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
毕业生如何写自荐信
2014/03/26 职场文书
文化大革命观后感
2015/06/17 职场文书
校园安全主题班会
2015/08/12 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
python实现MD5进行文件去重的示例代码
2021/07/09 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技