歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> window.open()和window.showModalDialog()

window.open()和window.showModalDialog()

日期:2017/3/1 9:46:21   编辑:Linux編程

本文主要講解window.open()和window.showModalDialog()彈出窗口的一些基本用法和刷新問題

window.open()彈出對話框:

基本語法:

window.open(pageURL,name,parameters)
其中:
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(各參數用逗號分隔)
eg: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=no 是否顯示菜單欄,yes為顯示;

scrollbars=no 是否顯示滾動欄,yes為顯示;
resizable=no 是否允許改變窗口大小,yes為允許;

location=no 是否顯示地址欄,yes為允許;

status=no 是否顯示狀態欄內的信息(通常是文件已經打開),yes為允許;


下面來說一下window.opener


window.opener 實際上就是通過window.open打開的窗體的父窗體。比如在父窗體parent裡面通過window.open("sub.html")打開一個窗口,那麼在sub.html中window.opener就代表parent,可以通過這種方式設置父窗體的值或者調用父窗體的js方法。

eg:1,window.opener.test(); ---調用父窗體中的test()方法

2,如果window.opener存在,設置parent中stockBox的值。

if (window.opener && !window.opener.closed) {

window.opener.document.parent.stockBox.value = symbol;

}

主窗口的刷新你可以用
window.opener.location.reload();

window.showModalDialog()彈出對話框刷新問題的總結


showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。


參數傳遞:
1.要向對話框傳遞參數,是通過vArguments來進行傳遞的。類型不限制,對於字符串類型,最大為4096個字符。也可以傳遞對象,例如:

<script>
var obj = new Object();
obj.name="ttop";
window.showModalDialog("test.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
test.htm
<script>
var obj = window.dialogArguments
alert("您傳遞的參數為:" + obj.name)
</script>

window.showModalDialog()刷新父窗口和本窗口的方法及注意:

一.刷新父窗口的方法:
1.使用window.returnValue給父窗口傳值,然後根據值判斷是否刷新。

① 在window.showModalDialog()打開的窗口頁面中用window.returnValue方式設置返回值;
eg:window.returnValue='refresh';
②.在寫window.showModalDialog()彈出窗口函數時,定義一個個變量,然後根據變量值操作父窗口是否刷新;
eg:var winPar = window.showModalDialog

(url,'','dialogHeight:400px;dialogWidth:800px;status:no;scroll:no;help:no');

if(winPar == 'refresh'){
window.parent.location.reload(); //當window.showModalDialog窗口關閉時執行
}


winPar為①步驟給showModalDialog()窗口設置的返回值

總結:由於window.showModalDialog函數打開一個IE的模式窗口(就是打開後不能操作父窗口,只能等模式窗口關閉時才能操作),所以想要刷新父窗口只能在模式窗口關閉後執行。用window.returnValue可以向父窗口傳值,這樣一來可以用從模式窗口向父窗口傳遞值,然後根據值判斷操作父窗口的方式來刷新。這樣在任何關閉了模式窗口後父窗口都會自動刷新.


二.刷新模式本窗口
showModalDialog()窗口與window.open()打開的窗口刷新本窗口時不同,showModalDialog()窗口也不能用F5刷新,也沒有右鍵操作
①. 在模式窗口頁面中加入:
<base target="_self"> //在html和body之間
<a id="reload" href="本頁面url" ></a>

②. 在需要執行刷新操作的地方執行以下js:
reload.click();//reload為①中隱藏a標簽的id,當然可以換成其它名稱


三 注意事項

① 在點擊window.showModalDialog()窗口的鏈接的時候會打開新窗口,想要阻止打開新窗口,需要在窗口頁

面中的html和body之間加入: <base target="_self" />即可

② showModalDialog和showModelessDialog有什麼不同?
  showModalDialog:被打開後就會始終保持輸入焦點。除非對話框被關閉,否則用戶無法切換到主窗口。

類似alert的運行效果。

showModelessDialog:被打開後,用戶可以隨機切換輸入焦點。對主窗口沒有任何影響(最多是被擋住一下而已。

Copyright © Linux教程網 All Rights Reserved