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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
Node.js文件操作详解
Aug 16 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
layui 对table中的数据进行转义的实例
Sep 12 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/07/05 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
python fabric实现远程操作和部署示例
2014/03/25 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
django Admin文档生成器使用详解
2019/07/22 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
三人合伙协议书范本
2014/10/29 职场文书
人代会简报
2015/07/21 职场文书
公司车辆管理制度
2015/08/04 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技