HTML入門教程：打開新窗口和彈出窗口

　　一、 基本變化

　　參數解釋：

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

　　"page.html” 彈出窗口的文件名;

　　"newwindow” 彈出窗口的名字(不是文件名)，非必須，可用空””代替;

　　100 窗口高度;

　　width=400 窗口寬度;

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

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

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

　　menubar，scrollbars 表示菜單欄和滾動欄。

　　resizable=no 是否允許改變窗口大小，yes為允許;

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

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

　　二、 彈啟一個全屏窗口

　　加入fullscreen

　　三、 打開一個和按F11所見到的一樣的窗口

　　加入channelmode

　　四、 打開一個連標題欄都沒有的窗口(無標題、最小、最大、以及關閉按鈕)

　　看看，什么效果? 如果把resizable 設為0 scrollbars = no 呢?

　　五、 沒有最大化按紐的窗口

　　其實也就是象軟件的“關于我們”的那個窗口一樣，下面就是用對話

　　框窗口來實現它。

　　showModalDialog()以及showModelessDialog()

　　1.用showModalDialog()

　　www.jyygyx.com

　　2.用showModelessDialog()

　　www.jyygyx.com

　　至于showModalDialog()與showModelessDialog()的區別，在于showModalDialog()打開的窗口(簡稱模式窗口)，置在父窗口上，必須關

　　閉才能訪問父窗口(建議盡量少用，以免招人反感);showModelessDialog()

　　(簡稱無模式窗口)，打開后不必關閉也可訪問父窗口打開的窗口。

　　現在我將這里的一些參數說明一下。

　　dialogHeight: iHeight 設置對話框窗口的高度。

　　dialogWidth: iWidth 設置對話框窗口的寬度。

　　dialogLeft: iXPos 設置對話框窗口相對于桌面左上角的left位置。

　　dialogTop: iYPos 設置對話框窗口相對于桌面左上角的top位置。

　　center: {yes | no | 1 | 0 } 指定是否將對話框在桌面上居中，默認值是“yes”。

　　help: {yes | no | 1 | 0 } 指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。

　　resizable: {yes | no | 1 | 0 } 指定是否對話框窗口大小可變。默認值是“no”。

　　status: {yes | no | 1 | 0 } 指定對話框窗口是否顯示狀態欄。對于非模式對話框窗口，默認值是“yes”;對于模式對話框窗口，默認值是 “no”。

　　六、 彈出n 個窗口

　　這很簡單，只要執行n 次window.open()就行了，當然一定要給每個窗口起不同的名字，還有，設置一下left和top，避免重疊。

　　七、 刷新之后就不再彈出窗口

　　我們使用cookie來控制一下就可以了。

　　首先，將如下代碼加入主頁面HTML的區：

　　然后，用(注意不是openwin而是loadpop啊!) 替換主頁面中原有的這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。

　　八、 讓彈出窗口適應里面圖片的大小

　　很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。

　　實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接：

　　其中標記的href屬性指定全尺寸圖片的URL，target屬性設置為_blank指定在新窗口中顯示該圖片;標記的src屬性指定縮略圖的URL。

　　如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制(比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時)，則可調用 window.open方法，該方法接收三個參數，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態欄、菜單欄，寬、高分別為400、350的窗口中。

　　這里就提出了個問題，如果所有全尺寸圖片都具有統一的大小(比如都是400×350)，那么以上代碼適用于所有的縮略圖片鏈接(只是href屬性指向的全尺寸圖片文件不同)。但如果全尺寸圖片的大小并不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然后在window.open方法的窗口

　　特性參數中一一設置height和width為正確的值，在圖片數量較多的情況下，這顯然效率太低了。那么是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大小?通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現自適應圖片大小的彈出窗口了。下面即是實現代碼:

　　使用時將上面的代碼放在網頁文檔的標記對中，然后在鏈接的點擊事件中調用OpenFullSizeWindow函數，即可。以上代碼在IE 5.x-6.0中測試通過。

　　九、 比較靈活的HTA窗口

　　我簡單介紹一下，HTA的全名為HTML Application，翻譯過來就是HTML應用程序，你只要簡單的用.hta為擴展名保存HTML頁面就算創建了一個HTA文件，下面我們就用HTA來編個窗口，將以下這段代碼保存為.hta文件，然后再用瀏覽器打開看看吧。

　　推薦閱讀 HTML中文手冊：http://www.jyygyx.com/a/manual/html

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈