JavaScript窗口功能指南之創建對話框
- 發布于：2019-11-03
- 共 267 人圍觀
showModalDialog() (Internet Explorer 4 和以上版本)
showModelessDialog() (Internet Explorer 5 和以上版本)
以下是這些方法的語法：
vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]);
vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]);
第1個參數是一個字符串，它指定了在新窗口中裝載并顯示的文檔URL。第2個參數，vArguments，是一個variant，它指定了顯示文檔的命令。使用這個參數時，可以傳遞任意類型的數組或者數值。對話框能夠從window對象的dialogArguments屬性中將數值傳遞給調用者。
當通過其中一個方法打開一個新窗口時，新窗口（對話框）的window對象特寫了dialogArguments屬性，它包含了分配給調用方法的vArguments參數的數值。來看看下面的語句：
window.showModalDialog("modalurl.html", window);
注意，第2個命令參數實際上是當前瀏覽器窗口的window對象。下面是文件modalurl.html的代碼：
<HTML>
<HEAD>
<TITLE>Change the URL</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function load(menu) {
if (window.dialogArguments && dialogArguments.location) {
dialogArguments.location.href = menu.options[menu.selectedIndex].value;
window.close();
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Pick your favorite investment site:<P>
<FORM><SELECT NAME="menu">
<OPTION VALUE="http://www.fool.com/">Fool.com (The Motley Fool)
<OPTION VALUE="http://www.investor.com/">MoneyCentral Investor
<OPTION VALUE="http://www.thestreet.com/">TheStreet.com
</SELECT>
<INPUT TYPE="button" VALUE="Load" onClick="load(this.form.menu)"></FORM>
</BODY>
</HTML>
當用戶在對話框中點擊“Load”按鈕，打開者窗口的URL就變為選擇的數值。為了數值窗口文檔的URL，我們必須分配一個數值給需要window對象的location.href屬性。在這里，我們指定調用者的window對象做為showModalDialog()方法的第2個參數，所以，新窗口（對話框）中dialogArguments屬性就對應于調用者的window對象。
注意函數開始的對象檢測程序段。因為dialogArguments屬性只存在于由showModalDialog（）和showModelessDialog（）方法創建的窗口中，所以，我們必須確認在使用它們前這個屬性是否存在。而且，我們需要查找一個location.href屬性來確認dialogArguments屬性真正地對應于一個合法的window對象。
load（）函數的最后語句關閉對話框，從而指定的文檔能夠在原始窗口被裝載。注意，如果我們使用showModelessDialog（）方法替代showModalDialog（）方法，我們就不需要特別地關閉窗口，因為，即使對話框仍然打開時，新的URL依然會在下面的窗口（打開者）被裝載。在這里，當調用者的URL改變時（調用新頁面），對話框自動關閉。 當在Internet Explorer 5中執行showModelessDialog（）時，出現一個對話框，它位于瀏覽器窗口前面。用戶仍舊可以操縱下面的窗口，但是對話框會始終在上面。對話框與打開它的瀏覽器窗口相關聯，所以，如果用戶產生了一個不同的窗口，對話框與它的產生者一同被隱藏在后面。注意，一個modeless對話框實際上連接到一個包含產生它的腳本的文檔，所以，如果用戶在打開者窗口中裝載另一個不同的URL，對話框將自動關閉。
Internet Explorer 4 中的showModalDialog（）方法就完全不同。它建立一個modal對話框，并一直保持焦點直到被關閉。用戶根本不能訪問到打開者窗口。一個modal對話框與打開它的瀏覽器窗口相關聯，所以，如果用戶產生一個不同的瀏覽器窗口，對話框就與它的原始窗口一起被隱藏在活動窗口的下面。
現在是回來討論showModalDialog（）和showModelessDialog（）方法的參數的時候了。第3個參數，sFeatures，是一個字符串，它指定了對話框窗口的修飾特征，具體就是使用下面的一個或者多個以逗號分隔的數值：
dialogHeight: iHeight
設置對話框窗口的高度。盡管用戶能夠手工地調整一個對話框的高度為一個較小數值（要求產生的對話框是大小可變的），但是你可以指定的最小dialogHeight是100象素（pixels）。注意，在Internet Explorer 4.0中dialogHeight和dialogWidth的默認測量單位“em”，而在Internet Explorer 5中則是px（象素）。為了保持一致性，當設計modal對話框時，請以象素為單位指定dialogHeight和dialogWidth。
dialogWidth: iWidth
設置對話框窗口的寬度。
dialogLeft: iXPos
設置對話框窗口相對于桌面左上角的left位置。
dialogTop: iYPos
設置對話框窗口相對于桌面左上角的top位置。
center: {yes | no | 1 | 0 }
指定是否將對話框在桌面上居中，默認值是“yes”。為了避免居中，你可以設定為dialogLeft或者dialogTop。
help: {yes | no | 1 | 0 }
指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。
resizable: {yes | no | 1 | 0 } (Internet Explorer 5 and above)
指定是否對話框窗口大小可變。默認值是“no”。
status: {yes | no | 1 | 0 } (Internet Explorer 5 和以上版本)
指定對話框窗口是否顯示狀態欄。對于非依賴對話框窗口，默認值是“yes”；對于依賴對話框窗口，默認值是 “no”。
對象檢測
showModalDialog() 和 showModelessDialog() 方法并非被所有支持JavaScript的瀏覽器所支持。在調用任何一個方法之前，我們必須確認它們的有效性：
if (window.showModalDialog) {
...
}
if (window.showModelessDialog) {
...
}
如果用戶的瀏覽器不能支持需要的方法，你也許希望考慮一個可供選擇的行為，這可以通過調用window.open（）方法來實現：
if (window.showModalDialog) {
win = window.showModalDialog("mydialog.html", ...);
} else {
win = window.open("mydialog.html", ...);
}
一個交叉瀏覽器Modal對話框
看看下面的定義 (Navigator適用）:
<BODY onBlur="window.focus()">
如果你在< body >標記中使用上面的事件處理程序，那么包含文檔的窗口就會被聚焦，直到用戶關閉它。在這個僅Navigator適用的技術與Internet Explorer的showModalDialog（）方法之間，有些區別。被聚焦的窗口沒有與指定的窗口或者文檔相關聯。就是說，用戶不能調上來其它瀏覽器窗口，即使不是打開對話框的窗口。
JavaScript窗口功能指南之打開一個新窗口
（作者：聽風編譯 2001年01月19日 11:35）
當你點擊一個簡單的鏈接打開一個新窗口時，你沒有對新窗口任何控制權。瀏覽器以默認的功能打開新窗口。此外，你也不能使用JavaScript引用新窗口的window對象，因此你不可能操縱新窗口的屬性。看看下面的JavaScript語句：
window.open("http://www.docjs.com/", "win");
這條語句打開一個新窗口，顯示頁面http://www.docjs.com/。 新窗口的名字被賦值為 "win"。window對象的open()方法的基本語法是：
window.open(sURL, sName);
2個參數都是可選的，如果不想指定URL或者窗口名稱，就使用空字符串("").
sURL 是一個字符串，它指定了要顯示文檔的URL。如果不指定URL，就產生一個空窗口。 sName 是定義的窗口名字，這個名字被用于<form>或者<a>標記的 TARGET 屬性。在Internet Explorer 5 和以后版本，如果定義這個數值為 "_search"，那么就將在瀏覽器的搜索區打開 sURL 。
如果帶有同一參數sName執行window.open（）方法2次，會發生什么呢？就象用HTML產生的窗口一樣，如果你定義一個已經存在窗口的名字，那么open（）方法將簡單地利用存在的窗口，而不是打開一個新的。看看下面的腳本程序：
window.open("http://www.javascript.com/", "win");
window.open("http://www.docjs.com/", "win");
執行上面的語句，瀏覽器將打開一個名字為“win”的新窗口，并在其中顯示頁面www.javascript.com。第2條語句替換當前窗口內容為頁面www.docjs.com。下面的語句產生2個不同的窗口顯示各自的內容：
window.open("http://www.javascript.com/", "win1");
window.open("http://www.docjs.com/", "win2");
如果不指定新窗口的名字，瀏覽器就自動地產生一個新窗口。這同樣適用于“_blank”，但是空字符串是另外一回事。對于Internet Explorer和Navigator，有幾個重要的區別，如下：
window.open("http://www.cnn.com/");
window.open("http://www.usatoday.com/");
Internet Explorer Navigator
打開2個不同的窗口 打開2個不同的窗口
window.open("http://www.cnn.com/", "_blank");
window.open("http://www.usatoday.com/", "_blank");
Internet Explorer Navigator
打開2個不同的窗口 打開2個不同的窗口
window.open("http://www.cnn.com/", "");
window.open("http://www.usatoday.com/", "");
Internet Explorer Navigator
打開2個不同的窗口 只打開一個窗口，名字為空("")
下面一行不會用到，只是列舉出來。如果想命名窗口，就給出一個可以理解的名字（不是""）。如果不想命名，就干脆不指定這個參數，或者使用特殊的target位置"_blank"。
關于open（）方法的一個重要之處是：open（）方法幾乎總是以window.open（）的形式被調用執行，即使window代表了全局對象從而可以徹底省略。由于document對象也有open（）方法，所以當我們想打開一個新窗口時，指定window對象將會清晰必要。在事件處理中，必須指定window.open（），而不能簡單地使用open（）。由于JavaScript中靜態對象的作用范圍限制，沒有指定對象名字的open（）調用等價于document.open（）。比如說，當一個HTML按鈕的事件處理發生時，范圍就包含了按鈕對象、表單對象、文檔對象，以及窗口對象。這樣，如果那樣一個事件處理器引用了open（）方法，識別器在文檔對象就中止，事件處理器打開一個新的文檔，而不是打開一個新的窗口。
返回值
為了合適地引用子窗口，應該將window.open（）的結果分配給一個變量。如果窗口被成功地創建，window.open（）就返回新窗口對象，或者返回null表示創建失敗（比如由于內存不足）。如果你的腳本程序需要引用新窗口的元素，返回值就是非常重要的。然而，當新窗口打開后，并沒有“父－子”關系存在。看看下面的語句：
var recentTips = window.open("http://www.docjs.com/tips/", "tips");
這里，我們分配給新窗口的window對象一個變量值名叫recentTips。如果在函數中調用window.open（）方法，記住一定要省略var關鍵字，因為變量應該是全局的。否則，window的引用就位于局部變量中，并且當函數執行完畢后就不能被訪問。下面的語句在一個alert對話框中顯示新窗口的URL：
alert(recentTips.location.href);
你也可以通過下面的方法改變新窗口的URL：
recentTips.location.;
在前面一節中，你已經看到了如何使用HTML鏈接和表單打開一個新窗口。通過指定target屬性或者給window對象的name屬性分配一個數值，我們就能夠命名窗口。但是怎樣才能通過它的html名字來引用存在的窗口呢？答案是簡單的。如果你執行了帶有空字符串的URL參數以及存在窗口名字的window.open（）方法，這個窗口的引用就會被返回。看看下面的鏈接代碼：
<A TARGET="news">CNET</A>
當執行下面的語句時，就得到了新窗口的引用：
var latestNews = window.open("", "news");
讓我們再試一試。點擊這個鏈接 CNET，但它裝載后，點擊下面的按鈕：
這個按鈕實際上取回了名字叫做“news”的窗口的引用，并且修改了那個窗口的URL。注意，如果在點擊按鈕前不點擊那個鏈接，一個新的、空的窗口就被裝載（因為指定的窗口名字不存在）。記住，不管窗口中的文檔是什么，窗口始終保持著它的名字。下面是這個按鈕相關的HTML和JavaScript代碼：
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeURL(winName, newURL) {
win = window.open("", winName);
win.location.href = newURL;
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="Load ZDNet"
onClick="changeURL('news', 'http://www.zdnet.com/')">
</FORM>
前面一段腳本程序表明了如何獲取一個存在窗口的引用。如果你僅僅想改變存在窗口的URL，你同樣可以直接使用目標頁面的URL來調用window.open（）方法：
function changeURL(winName, newURL) {
win = window.open(newURL, winName);
}
在下面一節中，我們將討論如何定制新窗口的外觀
標簽：
