子窗口与父窗口的调用

最新推荐文章于 2022-11-01 14:10:39 发布

beichen3997

最新推荐文章于 2022-11-01 14:10:39 发布

阅读量525

点赞数

分类专栏：前端js

前端js 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

子窗口与父窗口的调用

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

顺便说下open的参数：

    Java代码   
    
 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代码   
    
 opener.document.getElementById("choosedProvider").value="Tom";

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

    Js代码   
    
  
 <script>  
 var newWindow;  
 function openWindow(url){  
 newWindow = window.open(“new.htm”, "", "width=400,height=300 ");  
 }  
 function changeChild(){  
 newWindow.document.getElementById("T").value="我变了";  
 }  
 </script>  

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

    Js代码   
    
  
 opener.location.reload();  
 window.close();  

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

    Js代码   
    
  
 <script>  
 var newWindow;  
 var timer;  
 function openWindow(url) {  
        newWindow = window.open(url, "", "width=400,height=300,resizable=yes");  
        timer = setInterval("updateAfterClose()", 1000);  
 }  
    
 function updateAfterClose() {  
        //父窗口去检测子窗口是否关闭，然后通过自我刷新，而不是子窗口去刷新父窗口  
        if(newWindow.closed == true) {  
        clearInterval(timer);  
        self.location.reload(); // 主窗口刷新  
        return;  
        }  
 }  
 </script>  

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

    Js代码   
    
  
 <script>  
 var newWindow;  
 function openWindow(url) {  
 newWindow = window.open(url, "", "width=400,height=300,resizable=yes");   
 }  
 function closeChild()  
 {  
 newWindow.close();  
 }  
 </script>  

在body加上onunload事件：

    Js代码   
    
 <body οnunlοad="closeChild()">

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

    Js代码   
    
  
 <script>  
 function closeParent()  
 {  
 opener.close();  
 }  
 </script>  
 <input type=button value="关闭父窗口" οnclick=closeParent()>  

beichen3997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子窗口与父窗口的调用

子窗口与父窗口的调用注意：要用open打开才行，如果用openModal打开则会访问不到opener.顺便说下open的参数： Java代码 window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollba
复制链接

扫一扫

专栏目录