<SCRIPT LANGUAGE="javascript">
<!--
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‘)
//寫(xiě)成一行 http://www.aspxuexi.com
-->
</SCRIPT>
參數解釋?zhuān)?
window.open 彈出新窗口的命令;
‘page.html‘ 彈出窗口的文件名;
‘newwindow‘ 彈出窗口的名字(不是文件名),非必須,可用空‘‘代替;
100 窗口高度;
width=400 窗口寬度;
top=0 窗口距離屏幕上方的象素值;
left=0 窗口距離屏幕左側的象素值;
toolbar=no 是否顯示工具欄,yes為顯示;
menubar,scrollbars 表示菜單欄和滾動(dòng)欄。
resizable=no 是否允許改變窗口大小,yes為允許;
location=no 是否顯示地址欄,yes為允許;
status=no 是否顯示狀態(tài)欄內的信息(通常是文件已經(jīng)打開(kāi)),yes為允許;
二、 彈啟一個(gè)全屏窗口
加入fullscreen
<SCRIPT LANGUAGE="javascript">
<!--
window.open (‘page.html‘, ‘newwindow‘, ‘fullscreen‘) //全屏了,自然其他條件就都失效了
-->
</SCRIPT>
三、 打開(kāi)一個(gè)和按F11所見(jiàn)到的一樣的窗口
加入channelmode
<SCRIPT LANGUAGE="javascript">
<!--
window.open (‘page.html‘, ‘newwindow‘, channelmode)
-->
</SCRIPT>
四、 打開(kāi)一個(gè)連標題欄都沒(méi)有的窗口(無(wú)標題、最小、最大、以及關(guān)閉按鈕)
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script language="javascript">
function unload()
{
var popUpSizeX=200; //窗口的寬度
var popUpSizeY=166; //窗口的高度
var popUpLocationX=2;//距離左邊的距離 相當于 left
var popUpLocationY=2;//距離頂端的距離 相當于 top
// URL of the popUp
var popUpURL="http://www.33d9.com/default.asp";; //打開(kāi)頁(yè)面的路徑
// ** 下面的就不要隨便改了 ***
splashWin = window.open("",‘x‘,‘fullscreen=1, ,scrollbars=auto,resizable=1‘);
splashWin.blur(); // Hide while updating
window.focus();
splashWin.resizeTo(popUpSizeX,popUpSizeY);
splashWin.moveTo(popUpLocationX,popUpLocationY);
splashWin.location=popUpURL;
}
// END
unload();
</script>
</HEAD>
<BODY></BODY></HTML>
看看,什么效果? 如果把resizable 設為0 scrollbars = no 呢?
五、 沒(méi)有最大化按紐的窗口
其實(shí)也就是象軟件的“關(guān)于我們”的那個(gè)窗口一樣,下面就是用對話(huà)框窗口來(lái)實(shí)現它。
showModalDialog()以及showModelessDialog()
1.用showModalDialog()
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModalDialog(‘http://www.fwcn.com‘,‘example04‘,‘dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes‘)
//-->
</SCRIPT>
<b>www.fwcn.com</b>
</body>
</html>
2.用showModelessDialog()
<html>
<SCRIPT LANGUAGE="javascript">
<!--
showModelessDialog(‘http://www.fwcn.com‘,‘example05‘,‘dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes‘)
//-->
</SCRIPT>
<b>www.fwcn.com</b>
</body>
</html>
至于showModalDialog()與showModelessDialog()的區別,在于showModalDialog()打開(kāi)的窗口(簡(jiǎn)稱(chēng)模式窗口),置在父窗口上,必須關(guān)閉才能訪(fǎng)問(wèn)父窗口(建議盡量少用,以免招人反感);showModelessDialog()(簡(jiǎn)稱(chēng)無(wú)模式窗口),打開(kāi)后不必關(guān)閉也可訪(fǎng)問(wèn)父窗口打開(kāi)的窗口。
現在我將這里的一些參數說(shuō)明一下。
dialogHeight: iHeight 設置對話(huà)框窗口的高度。
dialogWidth: iWidth 設置對話(huà)框窗口的寬度。
dialogLeft: iXPos 設置對話(huà)框窗口相對于桌面左上角的left位置。
dialogTop: iYPos 設置對話(huà)框窗口相對于桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否將對話(huà)框在桌面上居中,默認值是“yes”。
help: {yes | no | 1 | 0 } 指定對話(huà)框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否對話(huà)框窗口大小可變。默認值是“no”。
status: {yes | no | 1 | 0 } 指定對話(huà)框窗口是否顯示狀態(tài)欄。對于非模式對話(huà)框窗口,默認值是“yes”;對于模式對話(huà)框窗口,默認值是 “no”。
六、 彈出n 個(gè)窗口
這很簡(jiǎn)單,只要執行n 次window.open()就行了,當然一定要給每個(gè)窗口起不同的名字,
還有,設置一下left和top,避免重疊。
七、 刷新之后就不再彈出窗口
我們使用cookie來(lái)控制一下就可以了。
首先,將如下代碼加入主頁(yè)面HTML的<HEAD>區:
<script>
function openwin(){
window.open("page.html","","width=200,200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(";", offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie(‘popped‘)==‘‘){
openwin()
documents.cookie="popped=yes"
}
}
</script>
然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop?。。?替換主頁(yè)面中原有的<BODY>這一句即可。你可以試著(zhù)刷新一下這個(gè)頁(yè)面或重新進(jìn)入該頁(yè)面,窗口再也不會(huì )彈出了。
八、 讓彈出窗口適應里面圖片的大小
很多時(shí)候我們需要提供這樣的功能給訪(fǎng)問(wèn)者:當訪(fǎng)問(wèn)者點(diǎn)擊頁(yè)面中的縮略圖時(shí),其對應的全尺寸圖片將顯示在一個(gè)新的彈出窗口中供訪(fǎng)問(wèn)者查看。
實(shí)現此功能的最簡(jiǎn)單作法是用以下HTML代碼創(chuàng )建一個(gè)圖像鏈接:
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>標記的href屬性指定全尺寸圖片的URL,target屬性設置為_(kāi)blank指定在新窗口中顯示該圖片;<img>標記的src屬性指定縮略圖的URL。
如果我們想對顯示全尺寸圖片的窗口的外觀(guān)進(jìn)行某些控制(比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時(shí)),則可調用 window.open 方法,該方法接收三個(gè)參數,分別指定要打開(kāi)文件的URL,窗口名及窗口特性,在窗口特性參數中可指定窗口的高度、寬度,是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個(gè)沒(méi)有工具欄、地址欄、狀態(tài)欄、菜單欄,寬、高分別為400、350的窗口中:
<a href="fullsize.jpg" onClick="window.open(this.href,‘‘, ‘height=350,width=400,toolbar=no,location=no,status=no,menubar=no‘);return false"><img src="small.jpg"></a>
這里就提出了個(gè)問(wèn)題,如果所有全尺寸圖片都具有統一的大?。ū热缍际?00x350),那么以上代碼適用于所有的縮略圖片鏈接(只是href屬性指向的全尺寸圖片文件不同)。但如果全尺寸圖片的大小并不統一,還用以上代碼則我們需要先取得每幅全尺寸圖片的大小,然后在window.open方法的窗口特性參數中一一設置height和width為正確的值,在圖片數量較多的情況下,這顯然效率太低了。那么是否有一勞永逸的方法,即讓彈出窗口能自動(dòng)適應要顯示圖片的大???通過(guò)研究,發(fā)現可以使用 DHTML 中的 Image 對象來(lái)達到我們的目的,Image 對象可動(dòng)態(tài)裝載指定的圖片,通過(guò)讀取其 width 和 height 屬性即能獲得裝入圖片的大小,以此來(lái)設置彈出窗口的大小,即可實(shí)現自適應圖片大小的彈出窗口了。下面即是實(shí)現代碼:
<script language="javascript" type="text/javascript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 對象是否已創(chuàng )建
if (typeof(imgObj) == "object"){
// 是否已取得了圖像的高度和寬度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根據取得的圖像高度和寬度設置彈出窗口的高度與寬度,并打開(kāi)該窗口
// 其中的增量 20 和 30 是設置的窗口邊框與圖片間的間隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因為通過(guò) Image 對象動(dòng)態(tài)裝載圖片,不可能立即得到圖片的寬度和高度,所以每隔100毫秒重復調用檢查
setTimeout("checkImg(‘" + theURL + "‘,‘" + winName + "‘)", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 彈出窗口外觀(guān)參數
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 調用是否來(lái)自 checkImg
if (features == null || features == ""){
// 創(chuàng )建圖像對象
imgObj = new Image();
// 設置圖像源
imgObj.src = theURL;
// 開(kāi)始獲取圖像大小
checkImg(theURL, winName)
}
else{
// 打開(kāi)窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
使用時(shí)將上面的代碼放在網(wǎng)頁(yè)文檔的<head></head>標記對中,然后在鏈接的點(diǎn)擊事件中調用OpenFullSizeWindow函數,如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,‘‘,‘‘);return false"><img src="small.jpg"></a>即可。
以上代碼在IE 5.x-6.0中測試通過(guò)。
九、 比較靈活的HTA窗口
我簡(jiǎn)單介紹一下,HTA的全名為HTML Application,翻譯過(guò)來(lái)就是HTML應用程序,你只要簡(jiǎn)單的用.hta為擴展名保存HTML頁(yè)面就算創(chuàng )建了一個(gè)HTA文件,下面我們就用HTA來(lái)編個(gè)窗口,將以下這段代碼保存為.hta文件,然后再用瀏覽器打開(kāi),會(huì )發(fā)現什么?買(mǎi)個(gè)關(guān)子,自己去瞧瞧。
<HTML>
<HEAD>
<TITLE>www.fwcn.com</TITLE>
<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
BORDER="thin"
BORDERSTYLE="normal"
CAPTION="yes"
ICON="filename.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="no"
INGLEINSTANCE="no"
SYSMENU="yes"
VERSION="1.0"
WINDOWSTATE="normal" />
</HEAD>
<BODY>
<b>www.fwcn.com</b>
</BODY>
</HTML>
有人會(huì )發(fā)現上面這些代碼與平時(shí)的html有點(diǎn)不同,多了HTA:APPLICATION標簽,這就是關(guān)鍵之處,hta通過(guò)它來(lái)提供一系列面向應用程序的功能,接下來(lái)再講一講它的屬性(我的頭又在發(fā)脹)
APPLICATIONNAME屬性(applicationName)
此屬性為設置HTA的名稱(chēng)。
BORDER屬性(border)
此屬性為設置為HTA的窗口邊框類(lèi)型,默認值為 thick。
它可以設為 thick 指定窗口為粗邊框
dialog window 指定窗口為對話(huà)框
none 指定窗口無(wú)邊框
thin 指定窗口為窄邊框
BORDERSTYLE屬性(borderStyle)
此屬性為設置HTA窗口的邊框格式,默認值為 normal。
它可以設為
normal 普通邊框格式
complex 凹凸格式組合邊框
raised 凸出的3D邊框
static 3D邊框格式
sunken 凹進(jìn)的3D邊框
CAPTION屬性(caption)
此屬性為設置HTA窗口是否顯示標題欄或標題,默認值為 yes。
ICON屬性(icon)
此屬性為設置應用程序的圖標。
MAXIMIZEBUTTON屬性(maximizeButton)
此屬性為設置是否在HTA窗口中顯示最大化按鈕,默認值為 yes。
MINIMIZEBUTTON屬性(minimizeButton)
此屬性為設置是否在HTA窗口中顯示最小化按鈕,默認值為 yes。
SHOWINTASKBAR屬性(showInTaskBar)
此屬性為設置是否在任務(wù)欄中顯示此應用程序,默認值為 yes。
SINGLEINSTANCE屬性(singleInstance)
此屬性為設置是否此應用程序同時(shí)只能運行一次。次屬性以APPLICATIONNAME屬性作為標識,默認值為 no。
SYSMENU屬性(sysMenu)
此屬性為設置是否在HTA窗口中顯示系統菜單,默認值為 yes。
VERSION屬性(version)
此屬性為設置應用程序的版本,默認值為空。
WINDOWSTATE屬性(windowState)
此屬性為設置HTA窗口的初始大小,默認值為 normal。
它可以設為 normal 默認大小
minmize 最小化
maximize 最大化
以上括號中的是在腳本引用的屬性。在腳本中以上屬性皆為只讀屬性。此外,在腳本中還可以使用commandLine屬性來(lái)檢索應用程序啟動(dòng)時(shí)的參數。
在HTA中還可以繼續使用html中的絕大多數標簽、腳本等。
聯(lián)系客服