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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
JS防抖和节流实例解析
Sep 24 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
2006/12/14 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python实现把数字转换成中文
2015/06/29 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
django中forms组件的使用与注意
2019/07/08 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
运动会解说词100字
2014/01/31 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
工程造价专业求职信
2014/07/17 职场文书
三严三实对照检查材料
2014/09/22 职场文书
水电工程师岗位职责
2015/02/13 职场文书