window.showModalDialog 與window.open傳遞參數的不同？

標籤：c   a   width   get   使用   cti   

簡單的說，就是一個在快顯視窗之後可以做其它的事，即window.open

另一個在快顯視窗之後不能做其它的事，只能是關閉了當前的視窗之後才能做其它的事，即window.showModalDialog

那麼兩者在使用上有什麼不同呢？他們分別是如何和父視窗進行互動的呢？

 

先來看window.showModalDialog的例子：

我這裡現在有一個父表單parent.jsp，它裡面有一個方法

     function openChild(){
                var temp = window.showModalDialog("child.jsp",window,‘dialogWidth=400px;dialogHeight=200px‘);
                document.getElementById("fromChildName").value = temp.childName;
                document.getElementById("fromChildAge").value = temp.childAge;
    }

 

這裡面，我們第二個參數傳遞為window，也就是把當前頁面做為參數傳遞到子視窗中，temp 為子視窗的傳回值

再來看子視窗child.jsp頁面：

     function fromParent(){
               var parName = window.dialogArguments.document.getElementById("parName").value;  //得到父視窗中的姓名
               var parAge = window.dialogArguments.document.getElementById("parAge").value
               document.getElementById("fromParName").value =  parName;
              document.getElementById("fromParAge").value = parAge;
    }

 

從上面我們就可以看出，在父視窗中我們傳遞了window這個參數，然後在子視窗中，我們用window.dialogArguments直接到取了父視窗中id = "parName"的屬性值

再來說這個傳回值temp是怎麼回事？

    function toParent(){
               var obj = new Object();
               obj.childName = document.getElementById("childName").value;
               obj.childAge = document.getElementById("childAge").value;
               window.returnValue = obj;
               window.close();
   }

 

我們用window.returnValue的方式直接把一個對象返回到父視窗，然後父視窗根據對象中的屬性直接取出其中的值就OK了

那麼，我們可不可以直接調用父視窗中的方法呢？

答案是肯定的：

     function fromParentFunction(){
               window.dialogArguments.parFunction();
      }

 

我們用window.dialogArguments + 父視窗的方法名，就直接可以調用父視窗的方法

 

上面是window.showModalDialog如何來進行子父視窗間的傳遞值，那麼，接下來看下window.open是如何進行子父視窗間的傳值：

在父視窗parent.jsp頁面中：

 

     function openChild(){
               var obj = window;
               obj.name = "張三";
               obj.age = "18";
               window.open(‘child.jsp‘,‘我是彈出子視窗‘,‘height=200,width=400,top=200,left=400,toolbar=no,menubar=no,

scrollbars=no, resizable=no,location=no, status=no‘);
        }

 

我們定義變數obj = window，再通過屬性賦值把對象傳遞過去，接下來看下子視窗：

     function fromParent(){
              alert("得到父視窗的中姓名值:"+ this.opener.name);
              alert("得到父視窗中的年齡值:"+ this.opener.age);
      }

 

利用this.opener.屬性名稱  就可以得到父視窗中的變數值

那麼如何把值子視窗中的值再返回到父視窗中呢？

 

    function toParent(){
                //把子視窗中的值傳遞給父視窗，document.getElementById("name").value得到子視窗的值
             this.opener.document.getElementById("parName").value = document.getElementById("childName").value;
             this.opener.document.getElementById("parrAge").value = document.getElementById("childAge").value;
            window.close();
     }

 

這裡的parName是父視窗中的id = ‘parName‘ ，也就是說，可以在子視窗中利用 this.opener. + 父視窗元素 賦值給父視窗