• Navigator對象:(領航員)

檢測瀏覽器的版本、所支持的MIME類型、已安裝的外掛程序(plug-in)。該對象包含兩個子對象:外掛對象、MIME類型對象。

  • Navigator對象的屬性:

    格式: navigator.屬性
appCodeName 代碼
appName 名稱
appVersion 版本
language 語言
mimeType 以數組表示所支持的MIME類型
platform 編譯瀏覽器的機器類型
plugins 以數組表示已安裝的外掛程序
userAgent 用戶代理程序的表頭

例1:
<Script>

with (document) {
     write ("你的瀏覽器信息:<OL>");
     write ("<LI>代碼:"+navigator.appCodeName);
     write ("<LI>名稱:"+navigator.appName);
     write ("<LI>版本:"+navigator.appVersion);
     write ("<LI>語言:"+navigator.language);
     write ("<LI>編譯平臺:"+navigator.platform);
     write ("<LI>用戶表頭:"+navigator.userAgent);
}

</Script>

例2:
<Script>

if (document.all) {
    document.write("你的瀏覽器是:MSIE");
}    else {
    document.write("你的瀏覽器是:Navigator");
}

</Script>

  • plugin對象的屬性:

    格式: navigator.plugins.屬性
description 外掛程序模塊的描述
filename 外掛程序模塊的文件名
length 外掛程序模塊的個數
name 外掛程序模塊的名稱

例:
<Script>

var len = navigator.plugins.length;
with (document) {
     write ("你的瀏覽器共支持" + len + "種plug-in:<BR>");
     write ("<TABLE BORDER>")
     write ("<CAPTION>PLUG-IN 清單</CAPTION>")
     write ("<TR><TH> <TH>名稱<TH>描述<TH>文件名")
     for (var i=0; i<len; i++)
         write("<TR><TD>" + i +
             "<TD>" + navigator.plugins[i].name +
             "<TD>" + navigator.plugins[i].description +
             "<TD>" + navigator.plugins[i].filename);
}


</Script>

  • mimeType對象的屬性:

    格式:navigator.mimeTypes.屬性
description MIME類型的描述
enablePlugin 對應到哪個外掛模塊
length MIME類型的數目
suffixes MIME類型的擴展名
type MIME類型的名稱

例:
<Script>

var len = navigator.mimeTypes.length;
with (document) {
     write ("你的瀏覽器共支持" + len + "種MIME類型:");
     write ("<TABLE BORDER>")
     write ("<CAPTION>MIME type 清單</CAPTION>")
     write ("<TR><TH> <TH>名稱<TH>描述<TH>擴展名<TH>附注")
    for (var i=0; i<len; i++) {
        write("<TR><TD>" + i +
            "<TD>" + navigator.mimeTypes[i].type +
            "<TD>" + navigator.mimeTypes[i].description +
            "<TD>" + navigator.mimeTypes[i].suffixes +
            "<TD>" +
           navigator.mimeTypes[i].enabledPlugin.name);
}
}

</Script>

 
  • 窗口對象的屬性和方法:

格式:

[window.]屬性
[window.]方法(參數)

opener.屬性
opener.方法(參數)
self.屬性
self.方法(參數)
parent.屬性
parent.方法(參數)
top.屬性
top.方法(參數)

窗口名稱.屬性
窗口名稱.方法(參數)

  • 窗口對象的屬性
document 當前文件的信息
location 當前URL的信息
name 窗口名稱
status 狀態欄的臨時信息
defaultStatus 狀態欄默認信息
history 該窗口最近查閱過的網頁
closed 判斷窗口是否關閉,返回布爾值
opner open方法打開的窗口的源窗口
outerHeight 窗口邊界的垂直尺寸,px
outerWidth 窗口邊界的水平尺寸,px
pageXOffset 網頁x-position的位置
pageYOffset 網頁y-position的位置
innerHeight 窗口內容區的垂直尺寸,px
innerWidth 窗口內容區的水平尺寸,px
screenX 窗口左邊界的X坐標
screenY 窗口上邊界的Y坐標
self 當前窗口
top 最上方的窗口
parent 當前窗口或框架的框架組
frames 對應到窗口中的框架
length 框架的個數
locationbar 瀏覽器地址欄
menubar 瀏覽器菜單欄
scrollbars 瀏覽器滾動條
statusbar 瀏覽器狀態欄
toolbar 瀏覽器工具欄
offscreenBuffering 是否更新窗口外的區域
personalbars 瀏覽器的個人工具欄,僅Navigator
  • 窗口對象的方法:
alert(信息字串) 彈出警告信息
confirm(信息字串) 顯示確認信息對話框
prompt(提示字串[,默認值]) 顯示提示信息,并提供可輸入的字段
atob(譯碼字串) 對base-64編碼字串進行譯碼
btoa(字串) 將進行base-64編碼
back() 回到歷史記錄的上一網頁
forward() 加載歷史記錄中的下一網頁
open(URL,窗口名稱[,窗口規格])
focus() 焦點移到該窗口
blur() 窗口轉成背景
stop() 停止加載網頁
close()
enableExternalCapture() 允許有框架的窗口獲取事件
disableExternalCapture() 關閉enableExternalCapture()
captureEvents(事件類型) 捕捉窗口的特定事件
routeEvent(事件) 傳送已捕捉的事件
handleEvent(事件) 使特定事件的處理生效
releaseEvents(事件類型) 釋放已獲取的事件
moveBy(水平點數,垂直點數) 相對定位
moveTo(x坐標,y坐標) 絕對定位
setResizable(true|false) 是否允許調整窗口大小
resizeBy(水平點數,垂直點數) 相對調整窗口大小
resizeTo(寬度,高度) 絕對調整窗口大小
scroll(x坐標,y坐標) 絕對滾動窗口
scrollBy(水平點數,垂直點數) 相對滾動窗口
scrollTo(x坐標,y坐標) 絕對滾動窗口
setInterval(表達式,毫秒)
setTimeout(表達式,毫秒)
clearInterval(定時器對象)
clearTimeout(定時器對象)
home() 進入瀏覽器設置的主頁
find([字串[,caseSensitivr,backward]]) 查找窗口中特定的字串
print()
setHotKeys(true|false) 激活或關閉組合鍵
setZOptions() 設置窗口重疊時的堆棧順序

 

  • 窗口對象的事件處理程序:

onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload

例1:
<Script>

function checkPassword(testObject) {
if (testObject.value.length < 4) {
     alert("密碼長度不得小于四");
     testObject.focus();
     testObject.select();
}
}

</Script>

請輸入密碼:
<INPUT TYPE="text" onBlur="checkPassword(this)">

例2:
<Script>

if (confirm("你滿十八歲了嗎?"))
     location = "adult.htm";
else
     alert("等你成年以後再來吧!");

</Script>

例3:
<Script>

var bgColor =
prompt("你喜歡哪一種底色:\n淺藍色請按1,粉紅色請按2",1)

if (bgColor == 1) document.bgColor = "#CCFFFF";
else if (bgColor == 2) document.bgColor = "#FFCCFF";
else document.bgColor = "#FFFFFF";

</Script>

例4:
<Script>
function grow() {
resizeBy(0, 50);
}

function shrink() {
resizeBy(0, -50);
}

</Script>

<Body onMouseOver="grow()" onMouseOut="shrink()">
將視窗放大與縮小
</Body>

例5:
<Script>

function scrollIt() {
for (y=1; y<=2000; y++) {
     scrollTo(1,y);
}
}

</Script>

<Body onDblClick=scrollIt()>
雙擊鼠標,畫面會自動卷動...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
... The End ...
</Body>

  • open方法的窗口規格參數:(yes/no,1/0)

格式:[var 新窗口對象名=]window.open("url","windowName","windowFeature")

alwaysLowered 是否將窗口顯示的堆棧后推一層
alwaysRaised 是否將窗口顯示的堆棧上推一層
dependent 是否將該窗口與當前窗口產生依存關系
fullscreen 是否滿屏顯示
directories 是否顯示連接工具欄
location 是否顯示網址工具欄
menubar 是否顯示菜單工具欄
scrollbars 是否顯示滾動條
status 是否顯示狀態欄
titlebar 是否顯示標題欄
toolbar 是否顯示標準工具欄
resizable 是否可以改變窗口的大小
screenX 窗口左邊界距離
screenY 窗口上邊界距離
top 窗口上邊界
width 窗口寬度
height 窗口高度
left 窗口左邊界
outerHeight 窗口外邊界的高度
personalbar 是否顯示個人工具欄

注釋:open("","","menubar")
       open("","","menubar=1")
       open("","","menubar=yes")

例1:
<Script>

document.write ("文哥網絡技術學習網");
open ('1.htm','','height=100,width=300');

</Script>

<!-------- 1.htm -------->
<TITLE>歡迎光臨</TITLE>

<BODY onClick="self.close()">

<IMG SRC="images\welcome.gif" ALIGN="left">
<CENTER>
<FONT COLOR="blue" SIZE="5">歡迎光臨</FONT><BR>
這是一個技術研習的小天地<BR>
</CENTER>

</BODY>

例2:
<Script>

document.write("文哥網絡技術學習網")
helloWin = open ('1.htm','','height=100,width=300');

var line1 = "<FONT COLOR='blue' SIZE='5'>歡迎光臨</FONT><BR>"
var line2 = "這是一個技術研習的小天地"
helloWin.document.write (line1 + line2)
helloWin.document.title = "歡迎光臨"

</Script>

例3:
<Script>

window.defaultStatus = "最棒的線上學習網站";

</Script>

<A onMouseOver="status='內容很充實喔!';return true">
文哥網路技術學習網</A>

例4:
<Script>

queryWin = open('1.htm','','height=100,')

</Script>

利用子窗口來改變母窗口的底色

/* -------- 1.htm -------- */
<Script>

function passToOpener(color) {
     opener.document.bgColor = color;
     self.close();
}

</Script>
<CENTER>

請選擇你喜歡的顏色?<BR>

<FONT onClick="passToOpener('#CCFFFF')"> >淺藍色<</FONT> 

<FONT onClick="passToOpener('#FFCCFF')"> >淺紅色<</FONT>

</CENTER>




ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程