window.parent与window.openner区别介绍


Posted in Javascript onApril 12, 2012

今天总结一下js中几个对象的区别和用法:
首先来说说 parent.window与top.window的用法
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举例说明:
如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写
"window.location.href"、"location.href":D页面跳转
"parent.location.href":C页面跳转
"top.location.href":A页面跳转
现在终于明白了连接的时候target的用法了:
_blank:重新打开一个窗口
_parent:父窗口执行重定向
_self:自身页面重定向
_top:第一个父窗口重定向
综上所述可知:parent.window:父窗口对象 top.window:第一个父窗口的对象
下面来重点看看window.parent与window.openner区别
window.parent 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取;
例子如下:
A.html

<html> 
<head> 
<title>父页面</title> 
</head> 
<body> 
<form id="form1" action=""> 
<div> 
输入值: 
<input type="text" name="username" id="username" /><br /> 
<iframe src="b.html" width="400px" height="300px"></iframe> 
</div> 
</form> 
</body> 
</html>

B.html
<html> 
<head> 
<script type="text/javascript"> 
function getpValue() 
{ 
document.getElementByIdx_x_x_x("span1").innerText=window.parent.document.getElementByIdx_x_x_x("username").value; 
} 
</script> 
</head> 
<body> 
<span>文本框值为:</span><span id="span1"></span><br /> 
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();"> 
</body> 
</html>

window.opener 是window.open或超链接<a> 打开的子页面调用父页面对象
例子如下
a.html
<html> 
<head> 
<title>父页面</title> 
<script type="text/javascript"> 
function openB() 
{ 
window.open('b.html','b','width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100'); 
} 
</script> 
</head> 
<body> 
<form id="form1" action=""> 
<div> 
输入值: 
<input type="text" name="username" id="username" /><br /> 
<input type="button" value="打开窗口B" onclick="openB();" /><br /> 
<a href="b.html" target="_blank">超链接打开B页面</a> 
</div> 
</form> 
</body> 
</html>

b.html
<html> 
<head> 
<script type="text/javascript"> 
function getpValue() 
{ 
document.getElementByIdx_x_x_x("span1").innerText=window.opener.document.getElementByIdx_x_x_x("username").value; 
} 
</script> 
</head> 
<body> 
<span>文本框值为:</span><span id="span1"></span><br /> 
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();"> 
</body> 
</html>

下面来举几个常用的例子:
parent.window与top.window一般在分割的页面即 frameset或iframe中使用
注销整个框架后返回到login.aspx:parent.window.location='Login.aspx'或者
top.window.location='Login.aspx'
window.parent也是常在框架中使用,
刷新:window.parent.location.reload();或者刷新某个框架:window.parent.MainForm.location.reload();
获得其他框架的元素值:window.parent.MainForm.form1.text1.value;
window.opener主要是获得通过超链接或者 window.open() 打开本身页面的页面的一些,比如获得值,刷新等
刷新:window.opener.location.reload();
获值:window.opener.document.getElement("txtName").value;
后退:top.playFrame.history.go(-1);
前进: top.playFrame.history.go(1);
刷新: top.playFrame.location.reload();
就总结到这里,这些对象很实用
Javascript 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
JavaScript单元测试ABC
Apr 12 #Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 #Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 #Javascript
JQuery学习笔录 简单的JQuery
Apr 09 #Javascript
广泛收集的jQuery拖放插件集合
Apr 09 #Javascript
深入分析js中的constructor和prototype
Apr 07 #Javascript
浅谈javascript中的作用域
Apr 07 #Javascript
You might like
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python http接口自动化脚本详解
2018/01/02 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
商场中秋节活动方案
2014/02/07 职场文书
大学军训感言800字
2014/02/27 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
环保建议书作文400字
2015/09/14 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫