朋友最近問我一個問題：子窗口添加數據并返回給父窗口一些添加成功的數據，同時父窗口刷新顯示添加前的頁面。相比很多人都相當熟知了,順便記錄一下：

==========================window.open()=================================

? ? ?基本語法：window.open(pageURL,name,parameters)
　　 ? ? 其中：
　　 ? ? ? ? ? ? ?pageURL 為子窗口路徑
　　 ? ? ? ? ? ? ?name 為子窗口句柄
　　 ? ? ? ? ? ? ?parameters 為窗口參數(各參數用逗號分隔)

父窗口：a.html

function goChildren(){

? var ?res=window.open ('b.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')//普通窗體}

參數解釋：（一般情況下這些參數是足夠的）

<SCRIPT LANGUAGE="javascript"> js腳本開始；

window.open 彈出新窗口的命令；

　'page.html' 彈出窗口的文件名；

　'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；

　height=100 窗口高度；

　width=400 窗口寬度；

　top=0 窗口距離屏幕上方的象素值；

　left=0 窗口距離屏幕左側的象素值；

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

? menubar，scrollbars 表示菜單欄和滾動欄。 　Resizable=no 是否允許改變窗口大小，yes為允許； ??location=no 是否顯示地址欄，yes為允許； ??status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許； ?</SCRIPT> js腳本結束 ? //子窗口執行該方法執行傳參操作 ?這樣父窗口得到參數就可以做相應的操作了 ?function?setValue(m_strValue)?{ ? ? ? ??if?(m_strValue?!=?null?&&?m_strValue?!=?undefined)?{ ? ? ? ? ? ? ? ? window.location.href?=?"a.html?paramter="+m_strValue; ? ? ? ? ? ? } ? ? ?} 子窗口 b.html <script?type="text/javascript"> ? ? ?function addData() ? ? ? ? ?{ ? ? ? ? ? ? var val=document.getElementById("txt_Value").value ? ? ? ? ? ? window.close(); ? ? ? ? ? ? opener.setValue(val); ? ? ?} </script> <input?type="text"?id="txt_Value" "?/><input type="button"?οnclick="addData():/> ==============================window.showModalDialog========================

基本介紹：
　　showModalDialog() (IE 4+ 支持)
　　showModelessDialog() (IE 5+ 支持)
　　window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
　　window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。 使用方法：
　　 vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
　　 vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])　
參數說明：
　　sURL--　必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
　　vArguments--　可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
　　sFeatures--　可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。

??? 參數: {取值范圍}：說明

| |
　　dialogHeight :對話框高度，不小于100px，IE４中dialogHeight 和 dialogWidth 默認的單位是em，而IE５中是px，為方便其見，在定義modal方式的對話框時，用px做單位。
　　dialogWidth: 對話框寬度。
　　dialogLeft: 離屏幕左的距離。
　　dialogTop: 離屏幕上的距離。
　　center: {yes | no | 1 | 0 }：窗口是否居中，默認yes，但仍可以指定高度和寬度。
　　help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認yes。
　　resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。默認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:{ yes | no | 1 | 0 | on | off }：默認為no。 實例： 父窗口：a.html function goChildren(){ var ?res=window.showModalDialog('b.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')//模態窗口} 參數和上面一樣就可以 子窗口：b.html <script?type="text/javascript"> function addData() { var val=document.getElementById("txt_Value").value window.returnvalue=val; window.close(); } </script> <input?type="text"?id="txt_Value" ?/><input type="button"?οnclick="addData():/>

轉載于:https://www.cnblogs.com/jameslif/archive/2012/07/05/2578117.html

總結

以上是生活随笔為你收集整理的自己使用window.open和window.showModalDialog在父子窗口传值的实践简单总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。