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脚本语言在网页中的简单应用
May 13 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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引用传值实例详解学习
2013/11/06 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python自动zip压缩目录的方法
2015/06/28 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python argparse模块应用实例解析
2019/11/15 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
英文自荐信
2013/12/19 职场文书
警校毕业生自我评价
2014/04/06 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2015年工程师工作总结
2015/04/30 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
同学聚会致辞集锦
2015/07/28 职场文书