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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
悬浮数字的实现案例
Feb 19 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
JavaScript中的高级函数
Jan 04 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 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实现微信摇一摇周边红包
2016/01/04 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python实现给字典添加条目的方法
2014/09/25 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python向excel中写入数据的方法
2019/05/05 Python
django基础学习之send_mail功能
2019/08/07 Python
Python JSON编解码方式原理详解
2020/01/20 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
结构和类有什么异同
2012/07/16 面试题
业务经理的岗位职责
2013/11/16 职场文书
期末自我鉴定
2014/02/02 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
导师对论文的学术评语
2015/01/04 职场文书
科技馆观后感
2015/06/08 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
我的收音机情缘
2022/04/05 无线电