用open或showModalDialog实现父子页面传值

1 open

如果实现open窗口父子页面传值，在父页面声明一个函数，函数要求要有参数，用来接收子页面传过来的值，子页面通过调用“window.opener.父页面函数”来实现将值传回父页面。

父页面：

//open窗口    
            function chooseDept() {
                window.open("listDept.html", "", "width=150px,height=400px");
            }
            
            function receiveValue(param) {
                var dept = document.getElementById("dept");
                dept.value = param;
            }

子页面：

//open窗口父子页面接传值
        function sure() {
            var dept = document.getElementsByName("dept");
            for(var i=0;i) {
                if(dept[i].checked) {
                    window.opener.receiveValue(dept[i].value);
                    window.close();
                }
            }
        }

2 showModalDialog

showModalDialog窗口，它与open窗口类似，但是对于showModalDialog窗口，当弹出时，父页面是不能被使用的，而open窗口正好相反。

声明格式:

window.showModalDialog("路径","窗口名","参数");

如何实现父子页面接传值，在父页面中打开窗口时，要声明一个变量并赋值。

//showModalDiaglog窗口
            function otherChooseDept() {
                var param = window.showModalDialog("listDept.html", "",
                        "dialogWidth=150px;dialogHeight=400px;");
                var dept = document.getElementById("dept");
                dept.value = param;
            }

然后在子页面中，将要传的值赋值给window.returnValue,这样就会把值传给父页面中声明的变量。

//showModalDialog窗口父子页面接传值 
        function otherSure() {
            var dept = document.getElementsByName("dept");
            for(var i=0;i) {
                if(dept[i].checked) {
                    window.returnValue = dept[i].value;
                    window.close();
                }
            }
        }

下面是测试html代码:

父页面

    
        

        
        
        

        
        
    

    
        

            

                

                    

                        姓名：
                    
                    

                        
                    
                
                

                    

                        性别：
                    
                    

                        
                        男
                        
                        女
                    
                
                

                    

                        地址：
                    
                    

                        
                    
                
                

                    

                        部门：
                    
                    

                        
                        
                    
                
                

                    

                        
                    
                    

                        
                            onclick="javascript:history.go(-1)" />
                    
                
            
        
    

子页面

  
    
    
    
    
    
    
    
    
  
  
  
        

            

                
选择
                
部门
            
            

                

                    
                
                
市场部
            
            

                

                    
                
                
人事部
            
            

                

                    
                
                
研发部
            
            

                

                    
                
                
财务部
            
            

                

                    
                
                
后勤部