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 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 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/06/23 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
jQuery使用手册之一
2007/03/24 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python统计单词出现的次数
2018/04/04 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python configparser模块应用过程解析
2020/08/14 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Django如何与Ajax交互
2021/04/29 Python
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL