js子窗口与父窗口的调用


子窗口与父窗口的调用 

注意:要用open打开才行,如果用openModal打开则会访问不到opener.

顺便说下open的参数:

 

Java代码   收藏代码
  1. window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'//这是一行的内容  

 

 

参数说明

'page.html' 弹出窗口的文件名; 'newwindow' 弹出的新窗口的名字,非必须,可用空''代替; 
height=100 高度; width=400 宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; 
toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏;
resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; 


1、从子窗口中往父窗口传值
如父页面有一个控制的id是choosedProvider,那么这样可以把值传给父页面:

Js代码   收藏代码
  1. opener.document.getElementById("choosedProvider").value="Tom";  

 
2、从父窗口传值给子窗口,如子窗口中有id为T的控件,此时可以用如下传值:

Js代码   收藏代码
  1. <script>  
  2. var newWindow;  
  3. function openWindow(url){  
  4. newWindow = window.open(“new.htm”, """width=400,height=300 ");  
  5. }  
  6. function changeChild(){  
  7. newWindow.document.getElementById("T").value="我变了";  
  8. }  
  9. </script>  

 
       先抓住其句柄,然后通过句柄操作,其实比较上面的子窗口往父窗口中传值,就是操作的对象改变了一下。
3、子窗口关闭并刷新父口,这里有两种方式:
a)         子窗口关闭时关闭父窗口:

Js代码   收藏代码
  1. opener.location.reload();  
  2. window.close();  

 
b)        父窗口去检测,子窗口是否已经关闭了,在设定的一段时间之后自动刷新:

Js代码   收藏代码
  1. <script>  
  2. var newWindow;  
  3. var timer;  
  4. function openWindow(url) {  
  5.        newWindow = window.open(url, """width=400,height=300,resizable=yes");  
  6.        timer = setInterval("updateAfterClose()", 1000);  
  7. }  
  8.    
  9. function updateAfterClose() {  
  10.        //父窗口去检测子窗口是否关闭,然后通过自我刷新,而不是子窗口去刷新父窗口  
  11.        if(newWindow.closed == true) {  
  12.        clearInterval(timer);  
  13.        self.location.reload(); // 主窗口刷新  
  14.        return;  
  15.        }  
  16. }  
  17. </script>  

 

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
    </head>
     <script type="text/javascript"> 
        var objWin; 
        function isOpen(id{ 
            //目标页面 
            var target = "pop.html?id="+id; 
            //判断是否打开 
            if (objWin == null || objWin.closed) { 
                objWin = window.open(target); 
            } else { 
                objWin.location.replace(target); 
            } 
            //objWin.focus(); 
        } 
              
    </script>
    <body>
        <a href="javascript:isOpen(1);">A页面1</a><br>
        <a href="javascript:isOpen(2);">A页面2</a><br>
        <a href="javascript:isOpen(3);">A页面3</a><br>
    </body>
</html>

4、父窗口关闭的时候关闭子窗口。这个就是用方法去检测父窗口的onunload事件:

Js代码   收藏代码
  1. <script>  
  2. var newWindow;  
  3. function openWindow(url) {  
  4. newWindow = window.open(url, """width=400,height=300,resizable=yes");   
  5. }  
  6. function closeChild()  
  7. {  
  8. newWindow.close();  
  9. }  
  10. </script>  

 
在body加上onunload事件:

Js代码   收藏代码
  1. <body οnunlοad="closeChild()">  

 
5、子窗口中关闭父窗口,这个功能可能相对要少用一点:

Js代码   收藏代码
  1. <script>  
  2. function closeParent()  
  3. {  
  4. opener.close();  
  5. }  
  6. </script>  
  7. <input type=button value="关闭父窗口" οnclick=closeParent()> 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值