夏日博客

A-A+

window.parent与window.openner用法与区别

2016年01月13日 前端设计 暂无评论 阅读 5 views 次

本文章来介绍一下关于window.parent与window.openner用法和区别有需要了解的同学可以参考一下。

frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent

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

window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面.

可以这样:

window.frames[0].document.getElementById('xx');

可以这样:

window.frames[0].document.body.innerHTML;

frm = window.parent.window.frames['uploadFrame'];

frmDocument = frm.document;

frm.sb(3); //sb 是uploadFrame页面里的一个函数

对于firefox:

如果你遇到报错：parent.document.frames has no properties

换为如下代码就可以了，这个代码IE,ff兼容. frm = window.parent.window.frames['uploadFrame'];其实 frames 集合并不是挂在 document 而是挂在 window 对象下.

注意这样修改frame里的页面有限制，就是必须是同域下的，否则无法访问

如果是同一域下，但是子域名不同，那么涉及到的js，html文件都加上一句。

document.domain = xxx.com [这里填写你的域名]

document.getElementById('iframeid').contentWindow.document.getElementById('someelementid');

parent.window例子如下：

举例:

a.html 代码如下:

  1. <html>  
  2. <head><title>父页面</title></head>  
  3. <body>  
  4. <form name="form1" id="form1">  
  5. <input type="text" name="username" id="username"/>  
  6. </form>  
  7. <iframe src="b.html" width=100%></iframe>  
  8. </body>  
  9. </html>  

如果我们需要在b.htm中要对a.htm中的username文本框赋值，就如很多上传功能，上传功能页在Ifrmae中，上传成功后把上传后的路径放入父页面的文本框中

我们应该在b.html中写:

  1. <script type="text/javascript">  
  2. var _parentWin = window.parent ;  
  3. _parentWin.form1.username.value = "xxxx" ;  
  4. </script>  

window.opener 是window.open或超链接 打开的子页面调用父页面对象.

例子如下:

a.html 代码如下:

  1. <html>   
  2. <head>   
  3. <title>父页面</title>   
  4. <script type="text/javascript">   
  5. function openB()   
  6. {   
  7. window.open('b.html','b','width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100');  
  8. }   
  9. </script>   
  10. </head>   
  11. <body>   
  12. <form id="form1" action="">   
  13. <div>  

输入值,代码如下:

  1. <input type="text" name="username" id="username" /><br />   
  2. <input type="button" value="打开窗口B" onclick="openB();" /><br />   
  3. <a href="b.html" target="_blank">超链接打开B页面</a>   
  4. </div>   
  5. </form>   
  6. </body>   
  7. </html>  

b.html 代码如下:

  1. <html>   
  2. <head>   
  3. <script type="text/javascript">   
  4. function getpValue()   
  5. {   
  6. document.getElementByIdx_x_x_x("span1").innerText=window.opener.document.getElementByIdx_x_x_x("username").value;  
  7. }   
  8. </script>   
  9. </head>   
  10. <body>   
  11. <span>文本框值为：</span><span id="span1"></span><br />   
  12. <input type="button" value="获取父窗口内的文本框值" onclick="getpValue();">   
  13. </body>   
  14. </html>  

window.parent 国外的简单用法

  1. Syntax  
  2.    
  3. window.parent.frames[num]  
  4.     window.parent.frameName   
  5.    
  6. The parent property contains a reference to the parent window.  
  7.    
  8. The referencing of these sibling frames can either be done using the frames array, or the name that is assigned by the NAME attribute of the tag.  
  9.    
  10. var myFrameReference = myWin.parent.frames[2];   

简单总结一下:

子页面：

/AAA/AAA.html

父页面：

/BBB/BBB.html

子页面中代码如下

parent.window.location="CCC.html"

结果:

父页面跳转到：

/AAA/CCC.html

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

self:自引用属性,是对当前window对象的应用,与window属性同义.

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

标签：

给我留言