在實際項目中經常會有這樣的需求，點擊某個按鈕彈出對話框，對話框中可以編輯和修改相應的內容，然后再保存並關閉窗口，如果寫一個靜態的div作為顯示隱藏，倒也可以，但是還得調整樣式，麻煩點。現在用window.open就可以實現同樣的效果，父頁面和子頁面照樣傳值。
demo代碼如下：
父頁面：
html部分：
<!-- Author : 趙一鳴 Blog ： http://www.zymseo.com Time ： 2016/9/20 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父頁面</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> .clear{ position:fixed; background:rgba(0,0,0,0.2); top:0px; right:0px; bottom:0px; left:0px; display:none; } </style> </head> <body> <input type="text" id="parentInpt" /> <input type="button" value="編輯" id="edit" /> <!--遮罩層--> <div class="clear"></div> </body> </html>
javascript部分：
<script type="text/javascript">
var parentPage = {
oEdit : document.getElementById('edit'),
oParentInpt : document.getElementById('parentInpt'),
oClear : document.getElementsByClassName('clear')[0],
//初始化方法
init : function(){
//點擊編輯按鈕
this.oEdit.onclick = this.editFunction;
},
//打開子頁面，初始化子頁面的寬高及位置
editFunction : function(){
var This = parentPage;
var oParentInptVal = This.oParentInpt.value;
This.oClear.style.display = 'block';
window.open('son.html',window,'height=500px,width=500px,left=500px,top=0px');
}
};
parentPage.init();
</script>
子頁面：
html部分：
<!-- Author : 趙一鳴 Blog ： http://www.zymseo.com Time ： 2016/9/20 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子頁面</title> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <input type="text" id="sonInpt" /> <input type="button" value="保存" id="save"> </body> </html>
javascript部分：
<script type="text/javascript">
var sonPage = {
oSonInpt : document.getElementById('sonInpt'),
oParentInpt : window.opener.document.getElementById('parentInpt'),
oSave : document.getElementById('save'),
//初始化方法
init : function(){
//子頁面自動獲取父頁面的input值
this.oSonInpt.value = this.oParentInpt.value;
//點擊保存按鈕
this.oSave.onclick = this.saveFunction;
//監聽用戶是否點擊了子頁面的關閉窗口按鈕，如果是，就傳值
window.onbeforeunload = sonPage.sonToParent;
},
//保存
saveFunction : function(){
sonPage.sonToParent();
window.close();
},
//子頁面給父頁面傳值，執行：
sonToParent : function(){
var This = sonPage;
var oSonInptVal = This.oSonInpt.value;
This.oParentInpt.value = oSonInptVal;
window.opener.document.getElementsByClassName('clear')[0].style.display = 'none';
}
};
sonPage.init();
</script>
另外，你也可以用iframe實現同樣的技術：我博客的WEB前端開發案例庫中有一篇文章：《解決原生js或jQuery 實現父窗口的問題，如window.parent.document.getElementById》。
通過window對象的open()方法，open()方法將會產生一個新的window窗口對象。其用法為：
window.open(URL,windowName,parameters)；
URL: 描述要打開的窗口的URL地址，如何為空則不打開任何網頁；
windowName:描述被打開的窗口的民稱，可以使用'_top'、'_blank'等內建名稱，這里的名稱跟<a href="..." target="...">里的target屬性是一樣的。
parameters:描述被打開的窗口的參數值，或者說是樣貌，其包括窗口的各個屬性值，及要傳入的參數值。
參數說明如下：
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；