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火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
javascript 闭包详解
Feb 15 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
浅谈原型对象的常用开发模式
Jul 22 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JS 时间显示效果代码
2009/08/23 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
js实现一键复制功能
2017/03/16 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python海龟绘图实例教程
2014/07/24 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python五子棋游戏的设计与实现
2019/06/18 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
驻村工作先进事迹
2014/08/14 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2015年手术室工作总结
2015/05/11 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
python 中yaml文件用法大全
2021/07/04 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript