關于初用window.open和window.showModalDialog使用的心得

一：window.open:

 window.open是非阻态視窗，也叫非模态視窗，也就是說當你打開window.open這個子視窗後，還可以切換去操作父視窗。

一般的格式是這樣的：

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')  
           

參數說明： 

window.open 彈出新視窗的指令；

　　'page.html' 彈出視窗的檔案名；

　　'newwindow' 彈出視窗的名字（不是檔案名），非必須，可用空''代替；

　　height=100 視窗高度；

　　width=400 視窗寬度；

　　top=0 視窗距離螢幕上方的象素值；

　　left=0 視窗距離螢幕左側的象素值；

　　toolbar=no 是否顯示工具欄，yes為顯示；

　　menubar，表示菜單欄

    scrollbars 表示卷軸框，為yes表示頁面允許滾動

　　resizable=no 是否允許改變視窗大小，yes為允許；

　　location=no 是否顯示位址欄，yes為允許；

　　status=no 是否顯示狀态欄内的資訊（通常是檔案已經打開），yes為允許；

二：window.showModalDialog：

window.showModalDialog表示阻态視窗，也就是打開這個視窗後，在關閉之前，不允許操作父視窗

一般的格式是這樣的：

window.showModalDialog("modal.htm","","dialogWidth=200px;dialogHeight=100px");
           

有些參數：

dialogHeight:   對話框高度，不小于100px

dialogWidth:   對話框寬度。

dialogLeft:   離螢幕左的距離。

dialogTop:   離螢幕上的距離。

center:  { yes | no | 1 | 0 } ：是否居中，預設yes，但仍可以指定高度和寬度。

help:    {yes | no | 1 | 0 }： 是否顯示幫助按鈕，預設yes。

resizable: {yes | no | 1 | 0 } [IE5+]：是否可被改變大小。預設no。

status: {yes | no | 1 | 0 } [IE5+]：   是否顯示狀态欄。預設為yes[ Modeless]或no[Modal]。

scroll: { yes | no | 1 | 0 | on | off }：是否顯示滾動條。預設為yes。

下面幾個屬性是用在HTA中的，在一般的網頁中一般不使用。

dialogHide:{ yes | no | 1 | 0 | on | off }：在列印或者列印預覽時對話框是否隐藏。預設為no。

edge:{ sunken | raised }：指明對話框的邊框樣式。預設為raised。

unadorned:     預設為no。

三：window.open的父視窗和子視窗的互動是怎麼樣的呢

比如父視窗的傳參是這樣的，一般來是以字元串的形式來傳的，具體可以不可以傳其他形式的，我目前沒去深究。

function openTable(id){  
var feathers="status=no,width=650px,height=670px,top=0px,menubar=no,resizable=no,scrollbars=yes,toolbar=no,channelmode=no";  
var openWin = window.open("allInfo.html?"+id+","+new Date().getTime(),"declare",feathers);  
openWin.focus();  
} 
           

然後子視窗用window.location.search來接收問号（？）後面的值，然後再拆分字元串，得到自己想要的值。

<script type="text/javascript">  
    var params= window.location.search;//params:?id,date  
      
    var arr = params.substring(1).split(",");  
      
    var id = arr[0];  
</script>
           

這樣就可以得到ID，window.opener是子視窗直接操作父視窗的一種用法，比如說，子視窗關閉時候，調用window.opener.location.reload()，就可以重新整理，還比如說，在子視窗頁面直接操作父視窗的資料，如：window.opener.document.getElementById("name").value = "輸入的資料";來通過js的方式來取值或者指派。