您的位置:首页 > Web前端 > javascript > 正文

js中parent和opener的区别

更多 时间:2013-12-25 类别:javascript 浏览量:4161

js中parent和opener的区别

js中parent和opener的区别

opener

opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。

parent

parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。

parent指父窗口,在FRAMESET中,FRAME的PARENT就是FRAMESET窗口。 opener指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。 两者肯定不一样。

parent是相对于框架来说父窗口对象 opener是针对于用window.open打开的窗口来说的父窗口,前提是window.open打开的才有。

实例介绍

window.parent

a页面

  •  
  • HTML 代码   复制
  • 
    <html>
    <head><title>主页面</title></head>
    <body>
    <form name="form1" id="form1"><input type="text" name="username" id="username"/></form>
    <iframe src="b页面" width=100%></iframe>
    </body>
    </html>
    
    		
  • b页面

  •  
  • HTML 代码   复制
  • 
    <html>
    <head><title></title>
    <script type="text/javascript">function UpdateParent()
    {
    
    var _parentWin = window.parent ;
    
    _parentWin.form1.username.value = "xxxx" ;
    
    } 
    </script>
    </head>
    <body>
    <form name="form1" id="form1">
    <p>&nbsp; </p>
    <p align="center">
        <input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">
    </p>
    <p>&nbsp; </p>
    </form></body>
    </html>
    
    		
  • window.opener

    a页面

  •  
  • HTML 代码   复制
  • 
    <html>
    <head>
    <title>主页面</title>
    <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("b页面",null,
    "height=" + _height + ",width=" + _width + ",status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=" + _left + ",top=" + _top);
    }
    </script>
    </head>
    <body><form name="form1" id="form1"><input type="text" name="username" id="username"/><input type="button" value="弹出子页面" onClick="openSubWin();"></form></body>
    </html>
    
    		
  • b页面

  •  
  • HTML 代码   复制
  • 
    <html>
    <head>
    <title>子页面</title>
    <script type="text/javascript">function UpdateParent()
    {
    
    var _parentWin = window.opener ;
    
    _parentWin.form1.username.value = "xxxx" ;
    
    } 
    </script>
    </head>
    <body>
    <form name="form1" id="form1">
    <p>&nbsp; </p>
    <p align="center">
        <input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">
    </p>
    <p>&nbsp; </p>
    </form>
    </body>
    </html>
    
    		
  • 本文地址:http://www.studyofnet.com/news/262.html