開花流水

          空山無人,水流花開。

          BlogJava 首頁 新隨筆 聯(lián)系 聚合 管理
            79 Posts :: 42 Stories :: 160 Comments :: 0 Trackbacks
          1、Javascript彈出子窗口 

          可以通過多種方式實現(xiàn),下面介紹幾種方法 

          (1) 通過window對象的open()方法,open()方法將會產生一個新的window窗口對象 

          其用法為: 
          window.open(URL,windowName,parameters); 

          URL: 描述要打開的窗口的URL地址,如何為空則不打開任何網頁; 

          windowName:描述被打開的窗口的民稱,可以使用'_top'、'_blank'等內建名稱,這里的名稱跟<a href="..." target="...">里的target屬性是一樣的。 

          parameters:描述被打開的窗口的參數(shù)值,或者說是樣貌,其包括窗口的各個屬性值,及要傳入的參數(shù)值。 

          例如: 

          打開一個 400 x 100 的干凈的窗口: 
          open('','_blank','width=400,height=100,menubar=no,toolbar=no, 
          location=no,directories=no,status=no,scrollbars=yes,resizable=yes') 

          也可以這樣寫: var newWindow = open('','_blank'); 

          參數(shù)說明如下: 

          top=# 窗口頂部離開屏幕頂部的像素數(shù) 
          left=# 窗口左端離開屏幕左端的像素數(shù) 
          width=# 窗口的寬度 
          height=# 窗口的高度 
          menubar=... 窗口有沒有菜單,取值yes或no 
          toolbar=... 窗口有沒有工具條,取值yes或no 
          location=... 窗口有沒有地址欄,取值yes或no 
          directories=... 窗口有沒有連接區(qū),取值yes或no 
          scrollbars=... 窗口有沒有滾動條,取值yes或no 
          status=... 窗口有沒有狀態(tài)欄,取值yes或no 
          resizable=... 窗口給不給調整大小,取值yes或no 


          (2) 在javascript中除了通過open()方法建立window對象實現(xiàn)彈出窗口外,還可以通過建立對話框的方式彈出窗口。 
          如: 
              alert(""); //彈出信息提示對話框 
              confirm(""); //彈出信息確認對話框 
              prompt(""); //具有交互性質的對話框 

          但是,上述實現(xiàn)的彈出窗口具有的功能較為單一,只能完成較為簡單的功能。對于需要在對話框中顯示多個數(shù)據(jù)信息, 

          甚至是HTML控件就無能為力了。 

          (3) 使用模態(tài)對話框實現(xiàn)復雜的對話框需求 
          在javascript的內建方法中還有一類方法可以實現(xiàn)通過對話框顯示HTML內容, 
          也就是說可以通過創(chuàng)建對話框的方式來完成創(chuàng)建窗口對象所能完成的功能。 
          包括創(chuàng)建模態(tài)對話框和非模態(tài)對話框兩種。 
             
          實現(xiàn)方法為: 

          //創(chuàng)建模態(tài)你對話框 
          window.showModalDialog(sURL,vArguments,sFeatures) 


          //創(chuàng)建非模態(tài)對話框 
          window.showModelessDialog(sURL,vArguments,sFeatures) 

          其區(qū)別在于: 

          用showModelessDialog()打開窗口時,不必用window.close()去關閉它,當以非模態(tài)方式[IE5]打開時, 打開對話框 

          的窗口仍可以進行其他的操作,即對話框不總是最上面的焦點,當打開它的窗口URL改變時,它自動關閉。而模態(tài)[IE4]方式的對話框始終有焦點(焦點不可移走,直到它關閉)。模態(tài)對話框和打開它的窗口相聯(lián)系,因此我們打開另外的窗口時,他們的鏈接關系依然保存,并且隱藏在活動窗口的下面。 showModeDialog()則不然。 

          參數(shù)說明: 

          sURL:必選參數(shù),類型:字符串。 

          用來指定對話框要顯示的文檔的URL。 

          vArguments:可選參數(shù),類型:變體。 

          用來向對話框傳遞參數(shù)。傳遞的參數(shù)類型不限,包括數(shù)組等。對話框通過window.dialogArguments來取得傳遞進來的參數(shù)。 

          sFeatures:選參數(shù),類型:字符串。 

          用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。 

          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: 是否顯示狀態(tài)欄。 

          默認為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 }。 

          傳入?yún)?shù): 

          要想對話框傳遞參數(shù),是通過vArguments來進行傳遞的。類型不限制,對于字符串類型,最大為4096個字符。也可以傳遞對象 

          例如: 

          var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px, 

          dialogWidth:300px, status:0, edge:sunken'); 

          newWin.open(); 

          與使用window.open()方法創(chuàng)建窗口相比,模態(tài)方法創(chuàng)建窗口的區(qū)別在于有模態(tài)方法創(chuàng)建的窗口后將不能操作父窗口. 


          2、子窗口與父窗口間通信 

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

             //刷新父頁面 
             window.location.href=window.location.href ; //重新定位父頁面 
             window.location.reload; 


          (2) 模態(tài)窗口與父窗口通信 
          通過使用showModelDialog(),及showModelessDialog()方法創(chuàng)建的子窗口想與父窗口通信時,不能通過window.opener 

          來獲取父窗口對象。要實現(xiàn)通信,必須在創(chuàng)建模態(tài)子窗口時向子窗口傳入父窗口對象。 

          實現(xiàn)方式為: 

          在父窗口中: 

          var newWin=window.showModelDialog(url,window,''); 
          newWin.open(); 

          此時參數(shù)window即是父窗口對象 

          在子窗口中: 

          需首先獲取父窗口對象,然后才能使用父窗口對象。由于父窗口對象是在創(chuàng)建 
          子窗口時通過傳入?yún)?shù)的方式傳入的,因此,在子窗口中也只能通過獲取窗口參數(shù)的方式獲取父窗口對象。獲取方式如下 

          : 

          var parent=widnow.dialogArguments; 
          變量parent便是父窗口對象。 

          例如: 

          //通過子窗口提交父窗口中的表單:form1,提交后執(zhí)行查詢操作 
          var parent=window.dialogArguments; 
          parent.document.form1.action="QueryInfor.jsp"; 
          parent.submit(); 

          //刷新父頁面 
          var parent=window.dialogArguments; 
          parent.location.reload(); 

          //從子窗口傳值到父窗口 
          要實現(xiàn)在模態(tài)子窗口中傳值到父窗口,需要使用window.returnValue完成 

          實現(xiàn)方法如下: 

          在子窗口中: 

          //獲取父窗口某字段值,對該值加一后返回父窗口 
          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; 

          //在子窗口中設置父窗口的值 
          在子窗口中向父窗口中傳入值似乎沒有直接設置父窗口中的值來得明了。直接設置父窗口中元素的值顯得要更靈活一些,不過具體使用哪種方法要根據(jù)實際情況和已有的實現(xiàn)方式而定,因為如果使用了不切實際的方法不僅降低開發(fā)效率,也降低了執(zhí)行效率,往往也會造成不優(yōu)雅的實現(xiàn)方式和代碼風格。 

          子窗口設置父窗口的值使用方法如下: 

          子窗口中: 

          var parent=window.dialogArguments; 
          var x=parent.document.getElementById("age").value; 
          x=x+1; 
          //設置父窗口中age屬性值 
          parent.document.getElementById("age").value=x; 

          以上是我在項目中使用javascript解決子窗口問題時,收集及積累的一些方法和資料。我是使用建立模態(tài)窗口的方式來實現(xiàn)的(這主要與項目本身有關),不過其實不論是使用window.open()還是使用window.showModelDialog()進行傳參等操作時雖然在實現(xiàn)方法上有很大的差別,初次接觸會覺得有點亂,但只要理清子窗口與父窗口之間的關系和角色之后,就很好理解了。
          posted on 2009-06-20 09:48 開花流水 閱讀(357) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發(fā)表評論。


          網站導航:
           
          主站蜘蛛池模板: 德昌县| 汕头市| 闵行区| 腾冲县| 峨山| 新平| 莲花县| 磴口县| 白银市| 息烽县| 岫岩| 巢湖市| 台湾省| 南宁市| 炉霍县| 普兰店市| 大方县| 新田县| 贡嘎县| 勐海县| 盐池县| 吴忠市| 宜昌市| 英山县| 喀喇沁旗| 客服| 永善县| 茌平县| 东丰县| 怀安县| 石阡县| 鄂伦春自治旗| 东明县| 旬邑县| 社旗县| 怀仁县| 琼海市| 黑龙江省| 邻水| 盐池县| 抚顺市|