WEB窗口

出處:http://x125858805.iteye.com/blog/1845946

一、Javascript彈出子窗口:可以通過多種方式實現,下面介紹幾種方法
    1、通過window對象的open()方法,open()方法將會產生一個新的window窗口對象 //IE7裏不支持
   
        其用法爲:
            window.open(URL,windowName,parameters);
            URL: 描述要打開的窗口的URL地址,如何爲空則不打開任何網頁;
            windowName:描述被打開的窗口的民稱,可以使用'_top'、'_blank'等內建名稱,這裏的名稱跟<a href="..." target="...">裏的target屬性是一樣的。
            parameters:描述被打開的窗口的參數值,或者說是樣貌,其包括窗口的各個屬性值,及要傳入的參數值。
       
        例如:
            打開一個 400 x 100 的乾淨的窗口:
            open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
       
        參數說明如下:
            top=# 窗口頂部離開屏幕頂部的像素數
            left=# 窗口左端離開屏幕左端的像素數
            width=# 窗口的寬度
            height=# 窗口的高度
            menubar=... 窗口有沒有菜單,取值yes或no
            toolbar=... 窗口有沒有工具條,取值yes或no
            location=... 窗口有沒有地址欄,取值yes或no
            directories=... 窗口有沒有連接區,取值yes或no
            scrollbars=... 窗口有沒有滾動條,取值yes或no
            status=... 窗口有沒有狀態欄,取值yes或no
            resizable=... 窗口給不給調整大小,取值yes或no


    2、在javascript中除了通過open()方法建立window對象實現彈出窗口外,還可以通過建立對話框的方式彈出窗口。
        如:
            alert(""); //彈出信息提示對話框
            confirm(""); //彈出信息確認對話框
            prompt(""); //具有交互性質的對話框
        說名:
                 但是,上述實現的彈出窗口具有的功能較爲單一,只能完成較爲簡單的功能。對於需要在對話框中顯示多個數據信息,甚至是HTML控件就無能爲力了。

    3、使用模態對話框實現複雜的對話框需求
        在javascript的內建方法中還有一類方法可以實現通過對話框顯示HTML內容,也就是說可以通過創建對話框的方式來完成創建窗口對象所能完成的功能。包括創建模態對話框和非模態對話框兩種。
  
        實現方法爲:
            //創建模態你對話框
            window.showModalDialog(sURL,vArguments,sFeatures)
            //創建非模態對話框
            window.showModelessDialog(sURL,vArguments,sFeatures)
           
        其區別在於:
            用showModelessDialog()打開窗口時,不必用window.close()去關閉它,當以非模態方式[IE5]打開時, 打開對話框的窗口仍可以進行其他的操作,即對話框不總是最上面的焦點,當打開它的窗口URL改變時,它自動關閉。而模態[IE4]方式的對話框始終有焦點(焦點不可移走,直到它關閉)。模態對話框和打開它的窗口相聯繫,因此我們打開另外的窗口時,他們的鏈接關係依然保存,並且隱藏在活動窗口的下面。 showModeDialog()則不然。   
        參數說明:
            sURL:必選參數,類型:字符串,用來指定對話框要顯示的文檔的URL。           
            vArguments:可選參數,類型:變體,用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。           
            sFeatures:選參數,類型:字符串,用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。           
            dialogHeight:對話框高度,不小於100px,IE4中dialogHeight和dialogWidth 默認的單位是em,而IE5中是px,爲方便其見,在定義modal方式的對話框時,用px做單位。              
            dialogWidth: 對話框寬度。             
            dialogLeft: 距離桌面左的距離。              
            dialogTop: 離桌面上的距離。         
            center: 窗口是否居中       
            默認yes,但仍可以指定高度和寬度,取值範圍{yes | no | 1 | 0 }。  
            help: 是否顯示幫助按鈕           
            默認yes,取值範圍 {yes | no | 1 | 0 }。       
            resizable: 是否可被改變大小。       
            默認no,取值範圍 {yes | no | 1 | 0 } [IE5+]。   
            status: 是否顯示狀態欄。           
            默認爲yes[ Modeless]或no[Modal],       
            取值範圍{yes | no | 1 | 0 } [IE5+]。       
            scroll:指明對話框是否顯示滾動條。   
            默認爲yes,取值範圍{ yes | no | 1 | 0 | on | off }。   
            還有幾個屬性是用在HTA中的,在一般的網頁中一般不使用。       
            dialogHide:在打印或者打印預覽時對話框是否隱藏。       
            默認爲no,取值範圍{ yes | no | 1 | 0 | on | off }。   
            edge:指明對話框的邊框樣式。
            默認爲raised,取值範圍{ sunken | raised }。       
            unadorned:默認爲no,取值範圍{ yes | no | 1 | 0 | on | off }。
               
        傳入參數:       
            要想對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大爲4096個字符。也可以傳遞對象
           
            例如:       
                var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,       
                dialogWidth:300px, status:0, edge:sunken');
                newWin.open();       
                與使用window.open()方法創建窗口相比,模態方法創建窗口的區別在於有模態方法創建的窗口後將不能操作父窗口.

二、子窗口與父窗口間通信
    1、使用window.open()創建的窗口與父窗口通信可以在子窗口頁面中通過window.opener來獲取父窗口對象,獲取之後子窗口便可以對父窗口執行刷新,傳值等操作。
        如:
           window.opener.location.reload(); //子窗口刷新父窗口
           window.opener.location.href         //獲取父窗口href
           window.opener.locaiton.pathname     //獲取父窗口路徑名
           //刷新父頁面
           window.location.href=window.location.href ; //重新定位父頁面
           window.location.reload;

    2、模態窗口與父窗口通信
        通過使用showModelDialog(),及showModelessDialog()方法創建的子窗口想與父窗口通信時,不能通過window.opener來獲取父窗口對象。要實現通信,必須在創建模態子窗口時向子窗口傳入父窗口對象。
        實現方式爲,
            在父窗口中:
                var newWin=window.showModelDialog(url,window,'');
                newWin.open();
            此時參數window即是父窗口對象在子窗口中,需首先獲取父窗口對象,然後才能使用父窗口對象。由於父窗口對象是在創建子窗口時通過傳入參數的方式傳入的,因此,在子窗口中也只能通過獲取窗口參數的方式獲取父窗口對象,獲取方式如下:
                var parent=widnow.dialogArguments;
                變量parent便是父窗口對象。
                    例如:
                    //通過子窗口提交父窗口中的表單:form1,提交後執行查詢操作
                    var parent=window.dialogArguments;
                    parent.document.form1.action="QueryInfor.jsp";
                    parent.submit();
                    //刷新父頁面
                    var parent=window.dialogArguments;
                    parent.location.reload();
                    //從子窗口傳值到父窗口
                    要實現在模態子窗口中傳值到父窗口,需要使用window.returnValue完成實現方法如下:
                        在子窗口中:
                            //獲取父窗口某字段值,對該值加一後返回父窗口
                            var parent=window.dialogArguments;
                            var x=parent.docuement.getElementById("age").value;
                            x=x+1;
                            //傳回x值
                            window.returnValue=x;
                       
                        在父窗口中:
                            //獲取來自子窗口的值
                            var newWin=window.showModelDialog(url,window,'');
                            if(newWin!=null)
                            document.getElementById("age").value=newWin;
                            //在子窗口中設置父窗口的值
                            在子窗口中向父窗口中傳入值似乎沒有直接設置父窗口中的值來得明瞭。直接設置父窗口中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據實際情況和已有的實現方式而定,因爲如果使用了不切實際的方法不僅降低開發效率,也降低了執行效率,往往也會造成不優雅的實現方式和代碼風格。
                            子窗口設置父窗口的值使用方法如下:
                    子窗口中:
                        var parent=window.dialogArguments;
                        var x=parent.document.getElementById("age").value;
                        x=x+1;
                        //設置父窗口中age屬性值
                        parent.document.getElementById("age").value=x;
                       
三、補充:子窗體傳值給父窗體可以通過函數傳值
    1.htm 父窗體代碼
        <script language="javascript" >
            function toUrl() {
                window.open("2.htm","_blank");
            }
            function getvalue(a) {
                Form1.Text1.value=a;
            }
        </script>
       
        <form id="form1">
            <input id="text1" width=150px/>
            <input id="button1" name="button1" onclick="toUrl()"/>
        </form>
   
    2.htm 子窗體
        <script language="javascript" >
            function goBack() {
                window.opener.getvalue("123");
                window.close();
            }
        </script>
       
        <form id="form1">
            <input id="button1" name="button1" onclick="goBack()"/>
        </form>
   
    子窗體父窗體之間傳值通過摸態對話框,試驗代碼
        1.htm 父窗體
        <script language="javascript" >
            function transVal() {
                var newwin=window.showModalDialog("2.htm",window);
                if(newwin!="[object]"){
                    document.getElementById("Text1").value=newwin;
                }
            }
        </script>
       
        <form id="form1">
            <input id=text1 width=150px/>
            <input type="button" id=button1 onclick="transVal()"/>
        </form>
   
    2.htm 子窗體
        <script language="javascript" >
            function reVal() {
                var x="123";
                window.returnValue=x;
                window.close();
            }
        </script>
       
        <form id="form1">
            <input type="button" id=button1 onclick="reVal()"/>
        </form>





四、總結

1.showModalDialog父子窗口交互過程中
    父窗口:

       var newWin = window.showModalDialog("${pageContext.request.contextPath}/manage/task!toTestInfo.action?compilerName="+compilerName,window," center:yes") ;
      //newWin.open();          這行代碼一定要註釋


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章