showModalDialog在父窗體和子窗體之間傳值

轉自:http://www.cnblogs.com/qiufuwu618/archive/2012/09/13/2683231.html


Javascript中有一個函數window.showModalDialog可以打開一個新窗體,是一個模態窗口,那麼如何在父窗體和子窗體之間傳值呢?我們先看該函數的定義:vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
參數說明:

複製代碼
sURL--必選參數,類型:字符串。用來指定對話框要顯示的文檔的URL。
vArguments--可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures--可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。
dialogHeight :對話框高度,不小於100px,IE4中dialogHeight 和 dialogWidth 默認的單位是em,而IE5中是px,爲方便其見,在定義modal方式的對話框時,用px做單位。
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。
複製代碼


如:"dialogWidth=200px;dialogHeight=100px"
因此我們可以通過window.dialogArguments參數來在兩個窗體之間傳值
如下面兩個頁面:FatherPage.htm:

複製代碼
<script type="text/javascript"> 
  function OpenChildWindow() 
  { 
    window.showModalDialog('ChildPage.htm',document.getElementById('txtInput').value); 
  } 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" οnclick="OpenChildWindow()" />
複製代碼

ChildPage.htm:

複製代碼
<body οnlοad="Load()"> 
<script type="text/javascript"> 
  function Load() 
  { 
    document.getElementById('txtInput').value=window.dialogArguments ; 
  } 
</script> 
<input type="text" id="txtInput" /> 
</body>
複製代碼

上面只是傳遞簡單的字符串,我們還可以傳遞數組,如:FatherPage.htm:
XML-Code:

複製代碼
<script type="text/javascript"> 
  function OpenChildWindow() 
  { 
    var args = new Array(); 
    args[0] = document.getElementById('txtInput').value; 
    window.showModalDialog('ChildPage.htm',args); 
  } 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" οnclick="OpenChildWindow()" />ChildPage.htm: 
XML-Code: 
<script type="text/javascript"> 
  function Load() 
  { 
    document.getElementById('txtInput').value=window.dialogArguments[0] ; 
  } 
</script>
複製代碼

同樣我們還可以傳遞對象,如:FatherPage.htm:
XML-Code:

複製代碼
<script type="text/javascript"> 
  function OpenChildWindow() 
  { 
    var obj = new Object(); 
    obj.name = document.getElementById('txtInput').value; 
    window.showModalDialog('ChildPage.htm',obj); 
  } 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" οnclick="OpenChildWindow()" />
複製代碼

ChildPage.html:
XML-Code:

複製代碼
<script type="text/javascript"> 
  function Load() 
  { 
    var obj = window.dialogArguments; 
    document.getElementById('txtInput').value=obj.name ; 
  } 
</script>
複製代碼

以上都是從父窗體向子窗體傳值,那麼如何從子窗體向父窗體傳值呢 ?其實通過window.returnValue就可以獲取子窗體的值,window.returnValue與window.dialogArguments一樣,可以是任意變量,包括字符串,數組,對象等。如:FatherPage.html:
XML-Code:

複製代碼
<script type="text/javascript"> 
  function OpenChildWindow() 
  { 
    var obj = new Object(); 
    obj.name = document.getElementById('txtInput').value; 
    var result = window.showModalDialog('ChildPage.htm',obj); 
    document.getElementById('txtInput').value = result.name; 
  } 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" οnclick="OpenChildWindow()" />
複製代碼

ChildPage.html:
XML-Code:

複製代碼
<body οnlοad="Load()"> 
<script type="text/javascript"> 
  function Load() 
  { 
    var obj = window.dialogArguments; 
    document.getElementById('txtInput').value=obj.name ; 
  } 
  function SetValue() 
  { 
    var obj = new Object(); 
    obj.name = document.getElementById('txtInput').value; 
    window.returnValue = obj; 
    window.close(); 
  } 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="SetFather" οnclick="SetValue()" /> 
</body>
複製代碼

發佈了39 篇原創文章 · 獲贊 7 · 訪問量 52萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章