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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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原理之异常机制深入分析
2010/08/08 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
python常见数制转换实例分析
2015/05/09 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
小学语文教学反思
2014/02/10 职场文书
公司新年寄语
2014/04/04 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers