JavaScript視窗功能指南之建立快顯視窗

Internet Explorer 5.5支援一個新的window對象的方法：creatPopup（）。你可以向下面一樣建立一個快顯視窗：

　　var popupObj = window.createPopup();

　　當你建立了這個對象後，快顯視窗並不顯示。你必須要調用它的show方法：

　　popupObj.show(yOffset, xOffset, width, height, referenceObj)

　　在這裡：

　　yOffset 是快顯視窗距離螢幕左上方的水平位移。

　　xOffset 是快顯視窗距離螢幕左上方的垂直位移。

　　width 是快顯視窗的寬度。

　　height 是快顯視窗的高度。

　　referenceObj 是一個選擇性參數，它替代螢幕左上方做為引用yOffset 和 xOffset 的參照。

　　讓我們示範一下新的快顯視窗的用處。如果你點擊下面的連結，一個所有這個教程的菜單就會彈出來。注意，當菜單彈出時，頁面就滾動回到它的頂部。我們怎麼樣執行這個快顯視窗呢？首先，你需要定義一個可見菜單，它隨後會被轉載進快顯功能表。為了實現隱藏連結，可以將菜單放置到一個隱藏的位置。我們選擇位置（－1000，－1000），並在菜單的style標記中定義它（在HEAD段的某個地方）：

　　<STYLE>

　　 .menu {position: absolute; top: -1000; left: -1000}

　　</STYLE>

　　我們執行菜單做為表格的連結：

　　<TABLE CLASS=menuID=submenu>

　　 <TR><TD NOWRAP>

　　　　<A HREF="names.html" TARGET="CONTENT">How to name your windows and frames</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="open.html">How to open a new window</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="features.html">How to specify the features of a new window</A>

　　 </TD></TR>

　　　　<TR><TD NOWRAP>

　　　　<A HREF="utilize.html">How to utilize the window features</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="exist.html">How to check if a window exists</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="reference.html">How to close a window</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="manipulate.html">How to manipulate a window</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="write.html">How to write content to a window</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="opener.html">How to reference the opener</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="dialog.html">How to create a dialog box</A>

　　 </TD></TR>

　　 <TR><TD NOWRAP>

　　　　<A HREF="popup.html">How to create a pop-up window</A>

　　 </TD></TR>

　　 <TR><TD></TD></TR>

　　</TABLE>

　　連結本身（教程的頁面）不會改變URL，但是當被點擊時，就調用showMenu（）函數：

　　<A HREF='#' ONCLICK='showMenu(this, submenu)'>Tutorial's Pages</A>

　　showMenu（）函數有2個參數，一個是連結化物件，它調用函數，另一個是菜單的ID。我們要採取的第一個行為是分配快顯視窗的body對象：

　　var popupBodyObj = popupObj.document.body;

　　然後，設定邊界為1象素，紫色，固體樣式：

　　popupBodyObj.style.border = "1px purple solid";

　　填充快顯視窗的內容絕不是一個瑣碎的工作，實現的一個方法就是使用innerHTML和outerHTML：

　　popupBodyObj.innerHTML = menuID.outerHTML;

　　接著，我們需要對頁面的所有連結指派onClick事件處理常式，定義這個事件的響應函數為doclick。

　　for (var i = 0; i < popupBodyObj.all.length; i++) {

　　 if (popupBodyObj.all[i].tagName == "A")

　　　　　　　　 popupBodyObj.all[i].onclick = doClick;

　　}

　　下面是showMenu（）函數的全部代碼：

　　function showMenu(linkObj, menuID) {

　　 var popupObj = window.createPopup();

　　 var popupBodyObj = popupObj.document.body;

　　 popupBodyObj.style.border = "1px purple solid";

　　 popupBodyObj.innerHTML = menuID.outerHTML;

　　 for (var i = 0; i < popupBodyObj.all.length; i++) {

　　　　if (popupBodyObj.all[i].tagName == "A")

　　　　 popupBodyObj.all[i].onclick = doClick;

　　 }

　　 popupObj.show(0, linkObj.offsetHeight, menuID.offsetWidth, menuID.offsetHeight, linkObj);

　　}

　　函數的最後一條語句是顯示快顯視窗。我們將快顯視窗放置於調用它的連結linkObj旁邊。如果你省略了這個引用，快顯視窗將參照螢幕左上方被放置。水平位移是0。為了避免視窗彈出時連結被隱藏，我們要設定對於連結高度的垂直位移，linkObj.offsetHeight。很自然，我們設定視窗的寬度和高度為初始菜單的寬度(menuID.offsetWidth)和高度(menuID.offsetHeight)。

　　函數doClick（）是一個2行代碼的程式，它修改當前視窗的URL（parent.href）為點選連結的URL（this）：

　　function doClick() {

　　 parent.location = this.href;

　　 return false;

　　}

總結
　　在這個教程中，我們試圖覆蓋JavaScript有關視窗相關特徵的大多數內容。我們給你展示了如何根據你的要求開啟一個新視窗，怎樣在視窗中寫內容，操縱它，關閉它。同時，我們介紹了如何引用開啟視窗的父視窗。最後，我們接觸到2個特殊類型的視窗：對話方塊和快顯視窗。