HTML入門教程：打開(kāi)新窗口和彈出窗口

　　一、 基本變化

　　參數(shù)解釋：

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

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

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

　　100 窗口高度;

　　width=400 窗口寬度;

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

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

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

　　menubar，scrollbars 表示菜單欄和滾動(dòng)欄。

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

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

　　status=no 是否顯示狀態(tài)欄內(nèi)的信息(通常是文件已經(jīng)打開(kāi))，yes為允許;

　　二、 彈啟一個(gè)全屏窗口

　　加入fullscreen

　　三、 打開(kāi)一個(gè)和按F11所見(jiàn)到的一樣的窗口

　　加入channelmode

　　四、 打開(kāi)一個(gè)連標(biāo)題欄都沒(méi)有的窗口(無(wú)標(biāo)題、最小、最大、以及關(guān)閉按鈕)

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

　　五、 沒(méi)有最大化按紐的窗口

　　其實(shí)也就是象軟件的“關(guān)于我們”的那個(gè)窗口一樣，下面就是用對(duì)話

　　框窗口來(lái)實(shí)現(xiàn)它。

　　showModalDialog()以及showModelessDialog()

　　1.用showModalDialog()

　　www.vxbq.cn

　　2.用showModelessDialog()

　　www.vxbq.cn

　　至于showModalDialog()與showModelessDialog()的區(qū)別，在于showModalDialog()打開(kāi)的窗口(簡(jiǎn)稱模式窗口)，置在父窗口上，必須關(guān)

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

　　(簡(jiǎn)稱無(wú)模式窗口)，打開(kāi)后不必關(guān)閉也可訪問(wèn)父窗口打開(kāi)的窗口。

　　現(xiàn)在我將這里的一些參數(shù)說(shuō)明一下。

　　dialogHeight: iHeight 設(shè)置對(duì)話框窗口的高度。

　　dialogWidth: iWidth 設(shè)置對(duì)話框窗口的寬度。

　　dialogLeft: iXPos 設(shè)置對(duì)話框窗口相對(duì)于桌面左上角的left位置。

　　dialogTop: iYPos 設(shè)置對(duì)話框窗口相對(duì)于桌面左上角的top位置。

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

　　help: {yes | no | 1 | 0 } 指定對(duì)話框窗口中是否顯示上下文敏感的幫助圖標(biāo)。默認(rèn)值是“yes”。

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

　　status: {yes | no | 1 | 0 } 指定對(duì)話框窗口是否顯示狀態(tài)欄。對(duì)于非模式對(duì)話框窗口，默認(rèn)值是“yes”;對(duì)于模式對(duì)話框窗口，默認(rèn)值是 “no”。

　　六、 彈出n 個(gè)窗口

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

　　七、 刷新之后就不再?gòu)棾龃翱?/p>

　　我們使用cookie來(lái)控制一下就可以了。

　　首先，將如下代碼加入主頁(yè)面HTML的區(qū)：

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

　　八、 讓彈出窗口適應(yīng)里面圖片的大小

　　很多時(shí)候我們需要提供這樣的功能給訪問(wèn)者：當(dāng)訪問(wèn)者點(diǎn)擊頁(yè)面中的縮略圖時(shí)，其對(duì)應(yīng)的全尺寸圖片將顯示在一個(gè)新的彈出窗口中供訪問(wèn)者查看。

　　實(shí)現(xiàn)此功能的最簡(jiǎn)單作法是用以下HTML代碼創(chuàng)建一個(gè)圖像鏈接：

　　其中標(biāo)記的href屬性指定全尺寸圖片的URL，target屬性設(shè)置為_(kāi)blank指定在新窗口中顯示該圖片;標(biāo)記的src屬性指定縮略圖的URL。

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

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

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

　　使用時(shí)將上面的代碼放在網(wǎng)頁(yè)文檔的標(biāo)記對(duì)中，然后在鏈接的點(diǎn)擊事件中調(diào)用OpenFullSizeWindow函數(shù)，即可。以上代碼在IE 5.x-6.0中測(cè)試通過(guò)。

　　九、 比較靈活的HTA窗口

　　我簡(jiǎn)單介紹一下，HTA的全名為HTML Application，翻譯過(guò)來(lái)就是HTML應(yīng)用程序，你只要簡(jiǎn)單的用.hta為擴(kuò)展名保存HTML頁(yè)面就算創(chuàng)建了一個(gè)HTA文件，下面我們就用HTA來(lái)編個(gè)窗口，將以下這段代碼保存為.hta文件，然后再用瀏覽器打開(kāi)看看吧。

　　推薦閱讀 HTML中文手冊(cè)：http://www.vxbq.cn/a/manual/html

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)