window.parent与window.opener的区别与使用

例1:

window.parent & window.opener

window.parent针对frame

父页面:

<html> 
<head><title>父页面</title></head> 
<body> 
<form name="form1" id="form1">

<input type="text" name="username" id="username"/>

</form> 
<iframe src="b1.html" width=100%></iframe> 
</body> 
</html>

子页面:

<script type="text/javascript"> 
function change(){
var _parentWin = window.parent ; 
_parentWin.form1.username.value = "来自子窗口 的参数" ; }
</script> 
<input type ="button" onclick='change()'>click</input>

 

 

window.opener针对的是打开子窗口 的父窗口

注释:只有表示顶层窗口的 Window 对象的 operner 属性才有效,表示框架的 Window 对象的 operner 属性无效。

父页面:

<script type="text/javascript"> 
function openSubWin() 

var _width = 300 ; 
var _height = 200 ; 
var _left = (screen.width - _width) / 2 ; 
var _top = (screen.height - _height) / 2 ; 
window.open("b2.html",null, 
"height=" + _height + ",width=" + _width + ",status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=" + _left + ",top=" + _top); 

</script> 
<form name="form1">
<input type="text" name="username" id="username"/> 
<input type="button" value="弹出子页面" onClick="openSubWin();"> 
</form>

 

子页面:

<script type="text/javascript"> 
function UpdateParent() 

var _parentWin = window.opener ; 
_parentWin.form1.username.value = "来自子窗口 的参数" ; 

</script> 
<input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">

 

 

ps:以下刷新父窗口并关闭当前窗口

<script language="JavaScript" type="text/javascript">  function refreshParent() {     window.opener.location.href = window.opener.location.href;     if (window.opener.progressWindow)     {         window.opener.progressWindow.close();     }     window.close(); } </script>  <a href="javascript:void(0)" onclick="refreshParent()">刷新父窗口并关闭当前窗口</a>

 

 

javascript:history.go()和History.back()

 

<input   type=button   value=刷新   onclick="window.location.reload()">  
  <input   type=button   value=前进   onclick="window.history.go(1)">  
  <input   type=button   value=后退   onclick="window.history.go(-1)">  
  <input   type=button   value=前进   onclick="window.history.forward()">  
  <input   type=button   value=后退   onclick="window.history.back()">
 
后退+刷新
<input   type=button   value=后退   onclick="window.history.go(-1);window.location.reload()">

 

history.back()是回上一页
i=1
history.go(i)去指定的某页
如果是history.go(0)那就是刷新

例2:

1、window.parent 是iframe页面调用父页面对象

举例: a.html

<html>
<head><title>A</title></head>
<body>
<form name=”form1″ id=”form1″>
<input type=”text” name=”username” id=”username”/>
</form>
<iframe src=”b.html” width=100%></iframe>
</body>
</html>

如果我们需要在b.html中要对a.html中的username文本框赋值(就如很多上传功能,上传功能页在ifrmae中,上传成功后把上传后的路径放入父页面的文本框中),我们应该在b.html中写:

<script type=”text/javascript”>
var _parentWin = window.parent;
_parentWin.form1.username.value = “xxxx”;
</script>

Z-Blog的文章编辑页面上传功能就是这么实现的。

2、window.opener 是 window.open 打开的子页面调用父页面对象

opener:对打开当前窗口的window对象的引用,如果当前窗口被用户打开,则它的值为null。

self代表自身窗口,opener代表打开自身的那个窗口,比如窗口a.html打开窗口b.html。如果靠window.open方法,则对于窗口b.html,self代表b.html自己,而opener代表窗口a.html。

举例:a.html

<input type=”text” name=”username” id=”username”/>
<a onclick=”window.open(this.href,”,’resizable=yes,width=800,height=600,status’); return false” href=”b.html”>B</a>

如果需要在b.html中对a.html中的表单元素赋值,我们应该在b.html中这么写

<a href=”javascript:try{window.opener.document.getElementById(‘username’).contentWindow.
frames[0].document.getElementsByTagName(‘body’)[0].innerHTML+=’xxx‘}catch(e){};window.close();“>插入</a>

在后面用window.close关闭b.html。WindsPhoto 2.7.3 中在文章编辑页面弹出新窗口(图片列表)后,选择插入已上传图片便是如此实现的。


例3:

我们如果要用到iframe的值传到另一框架就要用到window.opener.document.getElementByIdx(name).value = uvalue;这种形式哦。

window.parent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身。

可以用这一点特性来判断这个窗口是否是顶层窗口。如:

Code

function IsTopWindow( win )

{

    if( win.parent == win ) return true;

    else return false;

}

window.opener引用的是window.open打开的页面的父页面。


opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的opener,在B页面通过opener对象可以访问A页面。

parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent。

在JS中,window.opener只是对弹出窗口的母窗口的一个引用。比如:

a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过 window.opener(省略写为opener)来引用a.html,包括a.html的document等对象,操作a.html的内容。假如这个 引用失败,那么将返回null。所以在调用opener的对象前,要先判断对象是否为null,否则会出现“对象为空或者不存在”的JS错误。

window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:

window.opener.document.getElementByIdx("name").value = "输入的数据";


======================================================================

 

window.parent.location.reload()

让打开这个窗口的父窗口刷新,然后本子窗口关闭!


window.parent.HideThisDiv()

应该是让打开这个窗口的父窗口的某个DIV影藏


javascript:history.back()

就是后退啊!和浏览器里面的后退按钮一样!javascript:history.back(-1)就是后退一页  

 

=========================================

 

前边用window.opener=null来完成了窗口的无提示自动关闭.简单查了一下,window.opener是js中window的一个属性,它返回的是打开当前窗口的窗口对象.如果窗口A弹出一个窗口B,那么在B中window.opener就是窗口对象A.

这是JAVASCRIPT参考手册里对于opener的描述


window.opener <wbr>与 <wbr>window.parent <wbr>的区别    When a source document opens a destination window by calling the open method, the opener property specifies the window of the source document. Evaluate the opener property from the destination window.

window.opener <wbr>与 <wbr>window.parent <wbr>的区别    This property persists across document unload in the opened window.

window.opener <wbr>与 <wbr>window.parent <wbr>的区别    You can change the opener property at any time.

window.opener <wbr>与 <wbr>window.parent <wbr>的区别    You may use Window.open to open a new window and then use Window.open on that window to open another window,and so on. In this way, you can end up with a chain of opened windows, each of which has an opener property pointing to the window that opened it.

window.opener <wbr>与 <wbr>window.parent <wbr>的区别    Communicator allows a maximum of 100 windows to be around at once.If you open window2 from window1 and then are done with window1, be sure to set the opener property of window2 to null. This allows JavaScript to garbage collect window1. If you do not set the opener property to null, the window1 object remains, even though it's no longer really needed.


我大概翻译一下

当一个窗口用open方法打开了一个新窗口的时候,opener属性就生效了,直到被打开的窗口关闭时失效.

你可以通过opener在被打开的窗口中对父窗口进行一系列操作.

你可以在一个窗口中打开一个新窗口,新窗口又打开另外一个新窗口,新窗口又打开另外一个新窗口.....最后得到的是一串新窗口:em215:,然而每一个窗口的opener属性都指向打开它的那个窗口.

设计者最多允许打开100个这样的窗口.当你通过open打开了一个新窗口后,确保在新窗口中将opener属性设置为null(空).如果不这样的话,会使浏览器持续的保留每个opener的值,直至资源耗尽.


JS参考手册还给出了几个例子,我把我理解的部分演示一下~


首先建立1.htm,它用open方法打开2.htm,代码如下


<script language="JavaScript">

window.open('2.htm', ', 'width=225,height=235,resizable=1,scrollbars=auto');


建立2.htm,写入这些


window.opener <wbr>与 <wbr>window.parent <wbr>的区别<script language="JavaScript">

window.opener <wbr>与 <wbr>window.parent <wbr>的区别function ccc()

window.opener <wbr>与 <wbr>window.parent <wbr>的区别{

window.opener <wbr>与 <wbr>window.parent <wbr>的区别window.opener.document.bgColor='red';

window.opener <wbr>与 <wbr>window.parent <wbr>的区别}

window.opener <wbr>与 <wbr>window.parent <wbr>的区别function xxx()

window.opener <wbr>与 <wbr>window.parent <wbr>的区别{

window.opener <wbr>与 <wbr>window.parent <wbr>的区别window.opener.document.location='http://angel1949.blogcn.co...

window.opener <wbr>与 <wbr>window.parent <wbr>的区别}

window.opener <wbr>与 <wbr>window.parent <wbr>的区别

window.opener <wbr>与 <wbr>window.parent <wbr>的区别<input type="submit" name="Submit" value="变色" onClick="ccc()">

window.opener <wbr>与 <wbr>window.parent <wbr>的区别<input type="submit" name="Submit1" value="转向" onClick="xxx()">


打开1.htm我们会看到弹出的2.htm,点击2.htm中第一个按钮,1.htm的背景颜色变为了红色,点第二个按钮,1.htm被重定向到了指定的网址.这里通过2.htm来控制1.htm的行为正是利用了opener.


JS参考手册的描述中一再强调open动作完成后将opener设置为空,也就是window.opener=null,但是哪也没说它有关闭窗口时不提示这么个用法啊.比较前篇中父子窗口自动关闭的代码会发现,子窗口中是不需要把window.opener设置为空也可以无提示自动关闭的,而父窗口必须有这一句.关于window.opener在无提示关闭窗口的作用,是不是可以这么解释,浏览器认为子窗口与父窗口的优先级是不同的,子窗口可以随意关闭而父窗口可能有比较重要的内容而需要用户同意才可以关闭;当window.opener=null的时候,父窗口失去了原来的优先级,被浏览器认为是一个普通的窗口,所以可以象子窗口一样不需要提示而自动关闭了:em29:

参考:

http://blog.sina.com.cn/s/blog_51c8a3f60100hqf0.html

http://www.cnblogs.com/chengxiaohui/articles/1872883.html

http://www.wilf.cn/post/window-parent-window-opener.html


你可能感兴趣的:(window.parent与window.opener的区别与使用)