控制IE的彈出頁面
最基本的彈出窗口是通過windowopen()方法來實現的讀者對下面這段代碼應該不陌生執行該方法將會在浏覽器中打開一個新的indexhtml頁面
<script LANGUAGE=javascript>
windowopen (indexhtml)
</script>
節提到過JavaScript代碼在HTML中的嵌入形式所以應該放在<script LANGUAGE =javascript>標記和</script>之間windowopen(indexhtml)的作用是打開一個新窗口並裝載URL指定的文檔如果沒指定URL將會裝載一個空白文檔
注意如果載入的文件與主窗口不在同一路徑下前面應寫明路徑絕對路徑(http://)或相對路徑(/)均可可以用單引號也可以用雙引號只是要注意符號統一
通過改變windowopen()的參數來彈出窗口
通過改變windowopen()函數中的參數可以對彈出窗口的外觀進行具體的設置例如彈出窗口的外觀尺寸大小彈出位置等
<script LANGUAGE=javascript>
<!
windowopen(indexhtmlnewwindowheight=
width=top=left=toolbar=nomenubar=no
scrollbars=no resizable=nolocation=nostatus=no)
//注意寫在一行
>
</script>
【參數解釋】
<script LANGUAGE=java script>:JavaScript開始標記
windowopen:彈出新窗口的命令
pagehtml:彈出新窗口的文件名
newwindow:彈出窗口的名字(不是文件名)可用空代替
height=:窗口高度
top=:窗口距離屏幕上方的像素值
left=:窗口距離屏幕左側的像素值
toolbar=no:是否顯示工具欄yes為顯示
menubarscrollbars:表示菜單欄和滾動欄
resizable=no:是否允許改變窗口大小yes為允許
location=no:是否顯示地址欄yes為允許
status=no:是否顯示狀態欄內的信息(通常是文件已經打開)yes為允許
</script>:JavaScript結束標記
通過封裝函數調用的方式來控制彈出窗口
除了直接在HTML代碼中插入JavaScript腳本外還可以通過封裝函數調用的方式來控制彈出窗口下面是一段完整的應用
<html>
<head>
<script LANGUAGE=javascript>
<!
function openwin (){
windowopen(indexhtmlnewwindowheight=width=toolbar=no
menubar=noscrollbars=no resizable=nolocation=nostatus=no;)
//注意折行問題
}
>
</script>
</head>
<body onload=opennew ()>
<! HTML頁面內容 >
</body>
</html>
【代碼解讀】
以上代碼將打開一個新的彈出窗口將業務邏輯代碼進行函數封裝並命名為opennew()需要注意的是封裝的函數在沒有被調用之前是不會被執行的這樣在實際的應用中就可以根據不同的需求選擇不同的調用方式最常用的方法有以下幾種
直接加載<body onload=opennew ()>即直接加載方式當浏覽器執行到該行代碼後調用彈出窗口函數
離開調用<body onunload=opennew ()> 即當浏覽器離開本次浏覽的頁面時調用彈出窗口函數
偽鏈接調用<a href=# onclick= opennew ()>被打開文件名</a>即通過onclick單擊事件來調用彈出窗口函數
注意使用的#符號代表空鏈接
按鈕調用<input type=button onclick=opennew () value=打開窗口>同鏈接調用的原理相同即通過onclick點擊事件來調用彈出窗口函數
下面通過一個完整的例子展示用以上種方法調用彈出窗口實例在浏覽器中的執行效果如圖所示調用後的效果如圖所示
<html>
<head>
<meta httpequiv=ContentType content=text/html; charset=utf />
<title>彈出窗口頁面設置例子</title>
<script LANGUAGE=Javascript>
function newopen() {
var newopen ;
newopen=windowopen (indexhtml newwindow height= width=
toolbar =no menubar=no scrollbars=no resizable=no location=no
status=no) //寫成一行
newopendocumentwrite(<TITLE>彈出窗口頁面設置例子</TITLE>)
newopendocumentwrite(<BODY BGCOLOR=#FFFFFF>)
newopendocumentwrite(<H>Hello!</h>)
newopendocumentwrite(New window opened!)
newopendocumentwrite(</BODY >)
newopendocumentwrite(</HTML>)
newopendocumentclose()
}
</script>
<meta httpequiv=ContentType content=text/html; charset=utf>
</head>
<!注釋<body onload=newopen()>>
<!注釋<body onunload=newopen()>>
<body>
直接加載方式>在代碼中去掉注釋<br/>
離開加載方式>在代碼中去掉注釋<br/>
鏈接觸發調用><a href=# onClick=newopen()>鏈接方式打開</a><br/>
按鈕觸發調用><input type=button onClick=newopen() value=按鈕調用>
</body>
</html>
代碼在浏覽器中的執行效果如圖所示調用後的效果如圖所示
圖 彈出窗口預覽
返回目錄PHP典型模塊與項目實戰大全
編輯推薦
Java Web開發詳解
PHP Web開發學習實錄
ASP NET開發培訓視頻教程
圖 調用彈出頁面
From:http://tw.wingwit.com/Article/program/PHP/201311/21528.html