博學，切問，近思--詹子知 (https://jameszhan.github.io)
上一章，我們分析了javascript内置對象的屬性和方法，這一章，我們要開始學習浏覽器相關對象群組件的使用，盡管javascript可以運作在不同的腳本執行引擎當中，在伺服器端，asp背景程式就可以使用jscript來編寫。當然最廣泛的還是javascript在用戶端的應用。javascript除了可以通路本身内置的各種對象外，還可以通路浏覽器提供的對象，通過對這些對象的通路，可以得到目前網頁以及浏覽器本身的一些資訊，并能完成有關的操作。
浏覽器視窗與網頁文檔之間，網頁文檔與文檔元素之間是一種從屬關系，他們關系如下：
浏覽器的主要有以下對象：
windows 對象。
event 對象。
xmlhttprequest 對象。
document 對象。
screen 對象。
navigator 對象。
location 對象。
html标記通用屬性。
form 對象。
input 對象。
option 對象。
image 對象。
link 對象。
anchor 對象。
這裡我們主要對window，event，xmlhttprequest，document，screen，navigator等主要對象進行介紹，其他的如form，input，image，option等對象，我們這裡僅列出其屬性和方法，不做過多介紹，因為它們的那些屬性在html标記中都有說明。
window 對象
window 對象是浏覽器腳本執行引擎的全局對象，它的屬性和方法衆多，我們先看一下它的方法和屬性清單，不要被它吓到，其實常用的也就那麼幾個，後面我會專門有介紹，對于一些不太常用，需要的時侯可以回頭來再看這個表。
closed
一個隻讀的布爾值,聲明了視窗是否已經關閉。
defaultstatus
一個可讀可寫的字元串,聲明了顯示在狀态欄中的預設消息。
document
對描述視窗和架構中含有的文檔的document對象的隻讀引用。
frames
window對象的數組,每個window對象在視窗中含有一個架構。
history
對視窗或架構的history對象的隻讀引用。
length
視窗或架構包含的架構個數,也是數組frames[]中的元素數。
location
用于視窗或架構的location對象。
math
對一個對象的引用,該對象含有各種算術函數和常量。
name
一個字元串,存放了視窗的名字。
navigator
對navigator對象的隻讀引用,提供web浏覽器的版本資訊和配置資訊。
opener
一個可讀可寫的屬性,是對一個window對象的引用,該對象含有調用open()方法的腳本以打開頂級浏覽器視窗的腳本, 隻有表示頂層視窗的window對象的opener屬性才有效,表示架構的window對象的opener屬性無效。
parent
對一個window對象的隻讀引用,這個window對象包含目前的視窗或架構。
screen
一個screen對象,由浏覽器中所有視窗共享。
self
對視窗自身的隻讀引用,等價于window屬性。
status
一個可讀可寫的字元串,聲明了浏覽器狀态欄中的目前内容。
top
對一個頂級視窗的隻讀引用,頂級視窗包含了這個視窗。
window
window對象等價于self屬性,它包含了對視窗自身的引用。
innerheight,innerwidth
可讀可寫的屬性,聲明了視窗的文檔顯示區高度和寬度,以象素計, ns 支援。
outerheight,outerwidth
可讀可寫的屬性,聲明了整個視窗的高度和寬度,以象素計, firefox, ns 支援。
pagexoffset,pageyoffset
隻讀的整數,聲明了目前文檔向右和向下滾動過的象素數, firefox, ns 支援。
screenx,screeny
隻讀整數,聲明了視窗左上角在螢幕的x坐标和y坐标, firefox, ns 支援。
clientinformation
ie中與navigator屬性同義，ie支援。
event
一個event對象,該對象存放視窗window中最近發生事件的詳細資訊，ie支援。
alert()
在對話框框中顯示簡單的消息。
confirm()
用對話框詢問一個回答為是或否的問題。
prompt()
用對話框請求輸入一個簡單的字元串。
setinterval()
周期性執行指定的代碼。
clearinterval()
取消周期性執行的代碼。
settimeout()
在經過指定的時間之後執行代碼。
cleartimeout()
取消挂起逾時操作。
focus()
把鍵盤焦點賦予頂層浏覽器視窗。
blur()
把鍵盤焦點從頂層視窗中移走。
open()
建立并打開一個新視窗。
close()
關閉視窗。
moveby()
把視窗移動一個相對的數量。
moveto()
把視窗移動到一個絕對的位置。
resizeby()
把視窗大小調整指定的數量。
resizeto()
把視窗大小調整到指定的大小。
scrollby()
把視窗滾動指定的數量。
scrollto()
把視窗滾動到指定的位置。
scroll()
滾動視窗中顯示的文本。
print()
模拟對浏覽器print按鈕的點選。
back()
其行為和使用者點選了back按鈕一樣, firefox，ns支援。
captureevents()
指定直接發送給該視窗的事件類型, firefox，ns支援。
forward()
其行為和使用者點選了forward按鈕一樣, firefox，ns支援。
handleevent()
為給定的event對象調用合适的事件處理程式, firefox，ns支援。
home()
顯示浏覽器的首頁，firefox，ns支援。
releaseevents()
指定不再捕捉的事件類型, firefox，ns支援。
routeevent()
将event對象傳遞給下一個對它感興趣的對象的合适的事件處理程式, firefox，ns支援。
stop()
模拟對浏覽器stop按鈕的點選, firefox，ns支援。
navigate()
裝載并顯示出指定的url, ie支援。
onblur
當視窗失去焦點時調用該事件的處理程式。
onerror
當發生javascript錯誤時調用該事件的處理程式。
onfocus
當視窗獲得焦點時調用該事件的處理程式。
onload
當文檔(或架構集)被完全裝載進來時調用該事件的處理程式。
onmove
當移動視窗時調用該事件的處理程式,僅ns支援。
onresize
當調整視窗大小時調用該事件的處理程式。
onunload
當浏覽器離開目前文檔(或架構集)時調用該事件的處理程式。
最常用要數open方法和close方法了，我們先來看一下open方法的詳細定義：
window.open(url, target, style);
url：指定需要打開的檔案的連結。
target：指定要打開視窗的位置，一般有幾個可選屬性：_blank在新視窗打開頁面，_self在目前視窗打開頁面，_top在頂層視窗打開頁面，另外還可以指定其他已命名的視窗。
style：指定視窗顯示的風格，因為它的參數衆多，且都是可選的，我們用一個例子來說明它。假設我們指定style="height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300"，說明我們打開的新視窗的風格是：（高度100，寬度400，不顯示工具欄，菜單欄，滾動條，url欄，狀态欄，并且不可改變大小，左上角在螢幕上的位置是(100，300)）
傳回值：該方法傳回對新視窗的引用。這個方法頗受争議，萬惡的彈出視窗就是它了。
close 方法就比較簡單，它主要用來關閉指定引用的視窗。
現在，我們先來看一個例子。 var newwindow;
function openwindow(){
newwindow = window.open("", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
}
function closewindow(){
if(newwindow){
newwindow.close();
}openwindowclosewindow
如果你想輪詢的執行某任務，比如在ajax的程式中，輪詢的檢查伺服器上的資料更新，或是希望經過指定的時間去執行某個操作，這個時候我們就需要用到settimeout,setinterval哥倆了。而cleartimeout，clearinterval 專門用來取消它們。
先來看看settimeout函數的定義：
功能：用于在指定的毫秒數後調用函數或計算表達式。
文法：settimeout(code,millisec)
參數：
code：在定時時間到時要執行的javascript代碼串。
millisec：設定的定時時間，用毫秒數表示。
傳回值：定時器的id值，可用于cleartimeout()方法停止指定的定時器。
注：settimeout()隻執行code一次。如果要多次調用，可使用setinterval()或者讓code自身再次調用settimeout()。
setinterval函數的定義如下：
功能：按照指定的周期（以毫秒計）來調用函數或計算表達式。
文法：setinterval(code,millisec)
傳回值：定時器的id值，可用于clearinterval()方法停止指定的定時器。
注：setinterval()方法會不停地調用函數，直到用clearinterval()終止定時或視窗被關閉。
我們來看一個例子，下面有兩個個進度條，當點選starttimeout的時候，第一條進度條的長度會逐漸的增加，當點選endtimeout的時候，它就會停下來。當點選startinterval的時候，第二條進度條的長度會逐漸的增加，當點選endinterval之後，它也會停下來。
starttimeoutendtimeout
startintervalendinterval
這兩個特效的實作，我們就用到了setinterval和settimeout。以下是它的實作源碼。 function progress(id){
var bar = document.getelementbyid(id);
var len = parseint(bar.style.width);
if(len > 300){
len = 10;
bar.style.width = len + 1 + 'px';
var timeouthandler, intervalhandler;
function starttimeout(){
//每執行一次，progressbar1的width加1。
progress('progressbar1');
//100ms 後，調用starttimeout
timeouthandler = window.settimeout(starttimeout, 100);
function startinterval(){
//每隔100ms，progressbar2的with加1.
intervalhandler = window.setinterval("progress('progressbar2')", 100);
function endtimeout(){
cleartimeout(timeouthandler);
function endinterval(){
clearinterval(intervalhandler);
moveby()，moveto()，resizeby()，resizeto()，幾個方法盡管用的不多，但是卻很有意思，它可以控制視窗的大小和位置，我們使用一個例子來看它們的用法： function movewindow(){
// 打開一個新的空白視窗。
var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
//1秒鐘後，把它向下和向右分别移動100個像素。
settimeout(function(){
ow.document.writeln("我向下和向右分别移動100個像素<br />");
ow.moveby(100, 100)
}, 1000);
//2秒鐘後，把它左上角移到坐标(100, 100)處。
ow.document.writeln("我左上角的坐标是(100, 100)<br />");
ow.moveto(100, 100)
}, 2000);
//3秒鐘後，把它的寬度減少100，高度增加100。
ow.document.writeln("我的寬度減少了100，高度增加了100。<br />");
ow.resizeby(-100, 100)
}, 3000);
//4秒鐘後，把它的寬度和高度設定成300。
ow.document.writeln("我的寬度和高度和寬度是300。<br />");
ow.resizeto(300, 300)
}, 4000);
//5秒鐘後，關閉彈出視窗。
ow.document.writeln("我要被關閉了。<br />");
ow.document.close();
ow.close();
}, 5000);
movewindow
在這個例子中，我們用到了一個還沒學習的方法document.writeln，這個方法在後面會有介紹，它的主要功能是将一個或多個指定的字元串插入目前正在解析的文檔中或插入由open()方法打開的文檔流中。
說到這裡，我們不得不提一下浏覽器中的對話框，它有三種，就是提示框，确認框，和輸入框。使用alert()，confirm()，prompt()函數可以顯示它們，由于它們比較簡單，而篇幅有限，我們就用一個例子來介紹他們。 function showalert(){
alert('歡迎你光臨我的部落格！');
function showconfirm(){
if(confirm("請确認你的操作")){
alert('你确認了你的操作。');
}else{
alert('你取消了你的操作。');
function showprompt(){
var str = prompt("請你輸入something！");
alert("你輸入的内容是:" + str);
showalertshowconfirmshowprompt
event 對象
事件模型使得浏覽器能響應使用者的動作，現在的浏覽器都實作了強壯的事件模型，使腳本可以更加智能地處理事件。遺憾的是，不同浏覽器的下事件模型是不一緻的，對于不同模型下的事件對象擁有的屬性和方法也是不一緻的，下面列出了不同模型下事件的屬性和方法。
ie事件模型
altkey, ctrlkey, shiftkey
一個布爾值,指定事件發生時,alt, ctrl, shift鍵是否被按下并保持住了。
keycode
對于鍵盤事件,該屬性聲明了被敲擊的鍵生成的unicode字元碼。
reason
對于datasetcomplete事件,reason存放資料傳輸事件的狀态碼,0(成功)、1(失敗)、2(錯誤)。
type
一個字元串,說明了事件的類型。
returnvalue
如果設定了該屬性,它的值比事件處理程式真正的傳回值優先級高。
cancelbubble
如果事件處理程式想阻止事件傳播到包容對象,必須把該屬性設定成true。
fromelement
對于mouseover和mouseout事件,該屬性引用移出滑鼠的元素。
toelement
對于mouseover和mouseout事件,該屬性引用移入滑鼠的元素。
srcelement
對生成事件的window對象、document對象或htmldocument對象的引用。
srcfilter
對于filterchange事件,該屬性聲明改變的過濾器。
clientx, clienty
聲明了事件發生的位置相對于浏覽器頁面的x坐标和y坐标。
offsetx, offsety
發生事件的地點在事件源元素的坐标系統中的x坐标和y坐标。
x, y
事件發生的位置的x坐标和y坐标(ie中它們聲明了相對于用css動态定位的最内層包容元素的x坐标和y坐标)。
screenx, screeny
事件發生的地點相對于螢幕的x坐标和y坐标。
button
對于滑鼠事件,button事件聲明了被按下的滑鼠按鈕或按鈕。
firefox, ns事件模型
width
隻能由resize的事件設定,聲明了調整過視窗的新高度或架構的新寬度。
height
隻能由resize的事件設定,聲明了調整過視窗的新高度或架構的新高度。
which
"對于鍵盤事件和滑鼠事件來說,which聲明的是按下或放開的鍵或滑鼠按鈕。
target
對生成事件的window對象、document對象、layer對象或htmldocument對象的引用。
modifiers
聲明了事件發生時按下并保持住的組合鍵,ns6 未定義該屬性。
layerx, layery
事件相對于包容圖層的x坐标和y坐标。
pagex, pagey
事件發生的位置相對于浏覽器頁面的x坐标和y坐标。
事件發生的位置的x坐标和y坐标(在ns4中其等價于layerx和layery)。
浏覽器之間的鬥争可害苦了我們這些開發者，為了相容不同的浏覽器，我們必須加入額外的判斷語句。我們來看幾個例子。
例子1：得到事件源元素，并得到事件發生的坐标。 function findeventsource(e){
var evt = e.srcelement || e.target;
var x = e.pagex || e.x;
var y = e.pagey || e.y;
alert("事件源: "+ evt.innertext + "/n坐标：(" + x + ", " + y + ")");
事件源1事件源2
我們還可以動态的為元素綁定特定事件處理程式。不過不同的浏覽器支援的函數又是不一緻的。ie下支援attachevent()方法，而firefox下支援addeventlistener()方法。
attachevent("eventtype",fun)
eventtype是指事件類型,fun是指調用事件的函數
addeventlistener("eventtype",fun,flag)
addeventlistener方法的前兩個參數和attachevent方法一樣， flag參數則是一個boolean 值，指明該結點是否以dom中所謂的捕捉模式來偵聽事件。對于一個典型的事件偵聽器來說，第三個參數應該為false（假）。
不僅可以為元素添加指定事件的處理程式，而且還可以為指定事件删除指定的處理程式。ie下可以使用detachevent()方法，而firefox下可以使用removeeventlistener()方法。
例子2：為元素綁定事件處理程式 var eventtestfunction = function(){
alert("事件已經觸發，測試成功。");
//為button myeventtestbutton 綁定事件處理程式。
function attacheventfortestbutton(){
//getelementbyid 方法可以拿到指定id 的元素，将在dom模型中介紹。
var btn = document.getelementbyid('myeventtestbutton');
if(btn.addeventlistener){
btn.addeventlistener('click', eventtestfunction, false);
btn.attachevent('onclick', eventtestfunction);
alert("事件綁定成功。");
//為button myeventtestbutton 删除事件處理程式。
function detacheventfortestbutton(){
if(btn.removeeventlistener){
btn.removeeventlistener('click', eventtestfunction, false);
btn.detachevent('onclick', eventtestfunction);
alert("事件綁定取消。");
綁定事件取消綁定
測試事件綁定
xmlhttprequest元件
xmlhttprequest對象是當今所有ajax和web 2.0應用程式的技術基礎。盡管軟體經銷商和開源社團現在都在提供各種ajax架構以進一步簡化xmlhttprequest對象的使用；但是，我們仍然很有必要了解這個對象的詳細工作機制。下表列出了它的所有屬性和方法。
abort()
停止目前請求。
getallresponseheaders()
把http請求的所有響應首部作為鍵/值對傳回。
getresponseheader()
格式：getresponseheader(header),傳回指定名稱的http響應頭。
格式：open(method, url, async)。method訓示http請求方式，參數可以是get,post或put, url訓示請求資源的位址，參數可以是相對于url或絕對值url，async參數是否建立異步連接配接，預設為true, 建立對伺服器的調用。
send()
格式：send(content)，向伺服器發送請求。
setrequestheader()
格式：setrequestheader(header, value)，把指定首部設定為所提供的值，在設定任何首部之前必須先調用open()。
onreadystatechange
用于指定狀态改變時的事件處理函數，每個狀态都會觸發這個事件處理器。
readystate
請求的狀态。有5個可取值：0=未初始化、1=正在加載、2=已加載、3=互動中、4=完成。
responsetext
伺服器的響應,表示一個串。
responsexml
伺服器的響應,表示為xml.這個對象可以解析為一個dom對象。
伺服器響應的http狀态碼。
statustext
http狀态碼的相應文本。
為了使大家更好的了解它的原理和使用方法，我們跟着例子來學習。
例1：建立xmlhttprequest對象。 // 為了相容不同的浏覽器，以下給出了建立xmlhttprequest對象的方法。
function createxhrobject(){
var _msxml_progid = ['microsoft.xmlhttp', 'msxml2.xmlhttp.3.0', 'msxml2.xmlhttp'], http;
try{
http = new xmlhttprequest();
}catch(e){
for(var i=0; i<this._msxml_progid.length; ++i){
try {
http = new activexobject(this._msxml_progid[i]);
break;
} catch(ignore){}
return http;
例2：從指定的網站上擷取資訊。 function getgoogleinfo(){
var xmlhttp = createxhrobject();
var url = "/zhiqiangzhan/archive/2009/10/13/4663506.aspx";
xmlhttp.open('head', url, true);
xmlhttp.onreadystatechange = function(){
switch(xmlhttp.readystate){
case 0:
alert('未初始化！');
case 1:
alert('正在加載！');
case 2:
alert('已加載！');
case 3:
alert('互動中！');
default:
var headers = xmlhttp.getallresponseheaders();
var str = headers;
if(xmlhttp.status == 200){
str += "response:/n" + xmlhttp.responsetext;
str += xmlhttp.status + " " + xmlhttp.statustext;
alert(str);
alert('已完成！');
};
xmlhttp.send(null);
擷取網站資訊
document對象
document對象也是最常用的對象之一，下表列出了它的常用屬性和方法，不過此處列出的方法和屬性都不是太常用，下篇我們将介紹dom（文檔對象模型），到時我們還将介紹document作為文檔對象的另外的屬性和方法，那些方法和屬性可比現在的這些實用的多。
alinkcolor
一個字元串屬性,指定了document中被激活的連結的顔色。
anchors
一個anchor對象數組,每個元素代表了文檔中的一個錨。
applets
一個applet對象數組。
bgcolor
一個字元串,它是與文檔關聯在一起的cookie的值。
domain
一個字元串,它指定了文檔所屬的internet域。
embeds
一個對象數組,每個元素表示一個由<embed>标記嵌入文檔的資料。
fgcolor
一個字元串屬性,指定document文本的預設顔色。
forms
一個數組,元素是form對象,每個元素代表出現在document中的一個表單。
images
一個數組,元素是image對象,每個元素代表用<img>嵌入文檔的一個圖像。
lastmodified
一個隻讀字元串,聲明了最後一次修改文檔的日期。
linkcolor
一個字元串屬性,指定了文檔中未被通路過的連結的顔色。
links
一個數組,元素是link對象,每個元素代表了文檔中出現過的一個超文本連結。
一個location對象,含有目前文檔的完整url,是window.location的同義詞，不建議使用。
plugins
數組embeds[]的同義詞,不推薦使用。
referrer
一個隻讀字元串,含有連結到目前文檔的文檔的url(如果存在)。
title
一個隻讀字元串,指定了目前文檔的标題。
url
一個隻讀字元串,聲明了文檔的url。
vlinkcolor
一個字元串屬性,指定了document中已經通路過的連結的顔色。
activeelement
一個隻讀屬性,引用文檔中目前活動的輸入元素(即具有輸入焦點的元素)，僅ie支援。
all
一個數組,元素是文檔中包含的所有元素，僅ie支援。
charset
文檔采用的字元集，僅ie支援。
children
一個數組,元素是文檔的所有直接子元素,以他們在源代碼中的順序存放，僅ie支援。
defaultcharset
文檔采用的預設字元集，僅ie支援。
expando
如果将expando設定成false,可以阻止用戶端對象的擴充，僅ie支援。
parentwindow
包含文檔的視窗，僅ie支援。
文檔裝載的狀态，僅ie支援。它有4個可用的值:
uninitialized(還沒有開始裝載文檔)
loading(正在裝載文檔)
interactive(裝載的文檔已經足夠與使用者進行互動)
complete(文檔已經裝載完畢)
clear()
擦去文檔的内容,反對使用。
關閉由open方法打開的文檔流。
打開一個可供寫入文檔内容的流。
write()
将一個或多個指定的字元串插入目前正在解析的文檔中或插入由open()方法打開的文檔流中。
writeln()
與write()方法相似,隻是在輸入的字元串中插入一個換行符。
請求指定類型的事件，firefox支援。
getselection()
傳回目前選中的文檔文本。
停止捕捉指定類型的事件。
根據捕捉到的事件找到下一個與之相關的元素。
elementfrompoint()
傳回位于指定地點(x坐标,y坐标)的元素，僅是ie。
上面我們已經示範了writeln()方法，用于往文檔中寫入字元串，write()方法也類似，下面我們跟着例子來學習document的部分屬性和方法 function showdemo(){
// 設定标題
ow.document.write("設定頁面的标題，同blog頁面标題一緻。<br />");
ow.document.title = document.title;
// 設定字型顔色。
ow.document.write("設定文檔字型顔色，紅色。<br />");
ow.document.fgcolor = '#ff0000';
// 設定背景顔色。
ow.document.write("設定文檔背景顔色，黑色。<br />");
ow.document.bgcolor = '#000000';
// 關閉文檔輸入。
ow.document.write("關閉文檔輸入。<br />");
// 文檔關閉後，再次寫入資料，原來的資料将被清空。
ow.document.write("文檔關閉後，再次寫入資料，原來的資料将被清空。。<br />");
}, 6000);
showdemo
screen 對象
screen 對象提供有關顯示器的資訊。常用來判别使用者顯示器的分别率，對象的所有屬性都是隻讀的。
availheight, availwidth
聲明了顯示web浏覽器的螢幕的可用高度和寬度,以象素計。
availleft, availtop
聲明了螢幕最左側的x坐标和y坐标,這個坐标不是配置設定給暫存特性的空間的坐标。
colordepth
聲明了浏覽器配置設定的顔色數的以2為底的對數,可用于顯示圖像。
pixeldepth
聲明顯示浏覽器螢幕的顔色深度,以每象素的位數計。
height, width
聲明了顯示web浏覽器的螢幕的高度和寬度,以象素計。
以下代碼示範了如何顯示使用者的分辨率 //顯示使用者的分辨率
function showresolution(){
alert("您目前電腦的分辨率是: " + screen.width + "×" + screen.height);
showresolution
navigator對象
使用navigator對象可以檢視使用者正在使用的浏覽器的資訊。
appcodename
一個隻讀字元串,聲明了浏覽器的代碼名。
appname
一個隻讀字元串,聲明了浏覽器的名字。
appversion
一個隻讀字元串,聲明了浏覽器的平台和版本資訊。
cookieenabled
一個隻讀布爾值，訓示是否支援cookie。
language
一個隻讀字元串,聲明了浏覽器版本使用的預設語言，firefox，ns支援。
mimetypes
一個mimetype對象的數組,其中每個元素代表浏覽器支援的一種mime類型。
platform
一個隻讀字元串,聲明了運作浏覽器的作業系統和(或)硬體平台。
systemlanguage
一個隻讀字元串,聲明了浏覽器版本使用的預設語言，ie支援。
useragent
一個隻讀字元串,聲明了浏覽器用于http請求的使用者代理頭的值。
userlanguage
一個隻讀字元串,聲明了使用者想使用的語言，ie支援。
一個plugin對象的數組,其中每個元素代表浏覽器已經安裝的插件。
function shownavigatorinfo(){
var result = '';
for(var p in navigator){
result += p + ': ' + navigator[p] + '/n';
alert(result);
顯示目前浏覽器的資訊
下面的代碼常用來判别浏覽器的類型，既可以顯示浏覽器的型号，還可以顯示浏覽器的版本。
var navigatordetector = function() {
var o = {
ie:0,
opera:0,
gecko:0,
webkit: 0,
mobile: null,
air: 0,
caja: 0
}, ua = navigator.useragent, m;
if ((/khtml/).test(ua)) {
o.webkit=1;
m=ua.match(/applewebkit//([^/s]*)/);
if (m&&m[1]) {
o.webkit=parsefloat(m[1]);
if (/ mobile///.test(ua)) {
o.mobile = "apple";
} else {
m=ua.match(/nokian[^//]*/);
if (m) {
o.mobile = m[0];
m=ua.match(/adobeair//([^/s]*)/);
o.air = m[0];
if (!o.webkit) {
m=ua.match(/opera[/s//]([^/s]*)/);
o.opera=parsefloat(m[1]);
m=ua.match(/opera mini[^;]*/);
} else { // not opera or webkit
m=ua.match(/msie/s([^;]*)/);
o.ie=parsefloat(m[1]);
m=ua.match(/gecko//([^/s]*)/);
o.gecko=1;
m=ua.match(/rv:([^/s/)]*)/);
o.gecko=parsefloat(m[1]);
m=ua.match(/caja//([^/s]*)/);
o.caja=parsefloat(m[1]);
return o;
}();
function getnavigatorinfo(){
var str = '';
for(var p in navigatordetector){
str += p + ': ' + navigatordetector[p] + '/n';
運作代碼
location 對象
location提供了關于目前打開視窗或者特定架構的url資訊。
hash
一個可讀可寫的字元串,指定了目前url中的錨部分,包括前導散列符(#)。
host
一個可讀可寫的字元串,指定了目前url中的主機名和端口部分。
hostname
一個可讀可寫的字元串,指定了目前url中的主機名部分。
href
一個可讀可寫的字元串,它聲明了目前顯示文檔的完整url。
pathname
一個可讀可寫的字元串,聲明了目前url中的路徑部分。
port
一個可讀可寫的字元串,聲明了目前url中的端口部分。
protocol
一個可讀可寫的字元串,聲明了目前url中的協定部分。
search
一個可讀可寫的字元串,聲明了目前url中的查詢部分。
reload()
從緩存或伺服器中再次把目前文檔裝載進來。
replace()
用一個新文檔替換目前文檔,而不用在浏覽器的會話曆史中生成一個新的記錄。
顯示location資訊 function showlocationinfo(){
var str = "";
for(var p in location){
str += p + ': ' + location[p] + '/n';
顯示location資訊
html标記通用屬性
對于每個html标記，他們一般具有如下屬性和方法
該元素包含的所有元素的完整清單,以他們出現的順序存放,該屬性的行為與document.all[]屬性的行為一緻,僅ie支援。
一個數組,元素是文檔的所有直接子元素,以他們在源代碼中的順序存放，ie支援。
classname
一個可讀可寫的字元串,聲明了元素的class性質的值。
包含該元素的document對象的引用，僅ie支援。
id
一個可讀可寫的字元串,聲明了id性質的值。
innerhtml
一個可讀可寫的字元串,聲明了元素含有的html文本,不包括元素自身的開始标記和結束标記。
innertext
一個可讀可寫的字元串,聲明了元素含有的純文字,不包括元素自身的開始标記和結束标記。
lang
一個可讀可寫的字元串,聲名了element元素的lang的值。
offsetheight
元素和它的内容的高度,僅ie支援。
offsetleft
元素element的x坐标,相對于offsetparent指定的包容元素，ie支援。
offsetparent
定義了聲名坐标系統的包容元素，ie支援。
offsettop
元素element的y坐标,相對于offsetparent指定的包容元素，僅ie支援。
offsetwidth
元素和它的内容的寬度，僅ie支援。
outerhtml
一個可讀可寫的字元串,聲明了一個元素的html文本,其中包括元素自身的開始标記和結束标記, ie支援。
outertext
一個可讀可寫的字元串,聲明了一個元素的純文字,其中包括元素自身的開始标記和結束标記, ie支援。
parentelement
目前元素的直接父元素,該屬性是隻讀的。
sourceindex
元素在包容它的docuement.all[]數組中的下标, ie支援。
style
元素的内聯css樣式性質。
tagname
一個隻讀字元串,聲明定義element的html标記的名字。
一個可讀可寫的字元串,聲明了定義element的html标記的title性質值。
contains()
判斷目前元素是否含有指定的元素。
getattribute()
擷取一個命名性質的值。
把event對象傳遞給适當的事件處理程式。
insertadjacenthtml()
把html文本插入到與目前元素鄰接的文檔中。
insertadjacenttext()
把純文字插入到與目前元素鄰接的文檔中。
removeattribute()
從元素中删除一個屬性和它的值。
scrollintoview()
滾動文檔,使該元素出現在視窗的頂部或底部。
setattribute()
設定元素的性質值。
onclick
當使用者點選該元素時調用。
ondbclick
當使用者輕按兩下該元素時調用。
onhelp
當使用者請求幫助(f1)時調用,僅在ie中有效)。
onkeydown
當使用者按下一個鍵時調用。
onkeypress
當使用者按下一個鍵或放開一個鍵時調用。
onkeyup
當使用者放開一個鍵時調用。
onmousedown
當使用者按下一個滑鼠按鈕時調用。
onmousemove
當使用者移動滑鼠時調用。
onmouseout
當使用者把滑鼠移開目前元素時調用。
onmouseover
當使用者把滑鼠移過一個元素時調用。
onmouseup
當使用者放開一個滑鼠按鈕時調用。
form 對象
action
表單的處理頁面。
elements
一個數組,元素是表單中的輸入元素。
encoding
可讀可寫的字元串,送出表單時傳輸資料的編碼形式。
表單中的元素個數,等價于elements.length。
mothod
一個可讀可寫的字元串,它指定了送出表單資料所采用的方法。
聲名表單的名字,該屬性可讀可寫。
一個可讀可寫的字元串,指定了要顯示送出表單的結果的視窗或架構的名字。
reset()
把表單的所有元素重置為它們的預設值。
submit()
送出表單。
input 對象
checked
一個可讀可寫的布爾值,聲明了checkbox元素和radio元素目前是否被選中。
defaultchecked
一個隻讀的布爾值,聲明了checkbox或radio的初始狀态。
defaultvalue
聲明了在該表單元素中出現的初始文本,在重置表單時可以使用這個值來恢複元素。
form
一個隻讀屬性,引用含有該元素的form對象。
對于select表單元素,這個屬性聲明的是options[]數組中存放的選項數。
一個隻讀的字元串,聲明了該元素的名字。
options
對于select表單元素來說,這個數組存放的是option對象。
selectedindex
對于select來說,這個整數聲明了目前選中的select對象的選項。
一個隻讀字元串,聲明了表單元素的類型。
value
一個字元串屬性,聲明了在送出表單時送出給伺服器的值。
click()
在表單元素上模拟滑鼠點選。
将鍵盤焦點賦予該元素。
select()
對于顯示可編輯文本的表單元素來說,選中其中出現的所有文本。
将鍵盤焦點從元素中移開。
onchange
對于非按鈕表單元素來說,當使用者輸入了一個新值或選擇了一個新值時調用。
對于那些按鈕表單元素來說,當用點選或選擇了該按鈕時調用。
當使用者把鍵盤焦點給予該元素時調用。
option 對象
defaultselected
一個布爾值,聲明在建立包含該屬性的select對象時,該選項是否被選中。
index
一個隻讀整數,聲明了選項在包含它的select對象的options[]數組中的位置和下标。
selected
一個可讀可寫的布爾值,聲明了一個選項目前是否被選中了。
text
一個字元串,聲明了顯示給使用者的選項文本。
一個可讀可寫的字元串,聲明了如果在送出表單時option處于選中的狀态,要傳遞給伺服器的文本。
image 對象
border
一個整數,聲明了圖像邊線的寬度。
complete
一個隻讀的布爾值,聲明圖像是否已經完全裝載進來了。
一個整數,聲明了圖像的高度,以象素計。
hspace
一個整數,聲明了插入到圖像左右的水準距離。
lowsrc
聲明了替代圖像(一般較小)的url,當使用者的浏覽器在低分辨率的顯示器上運作時就顯示該圖像。
聲明圖檔的名稱。
src
聲明圖檔的url位址。
vspace
一個整數,聲明了插入到圖像上下的垂直距離。
一個整數,聲明了圖像的寬度,以象素計。
onabort
如果使用者放棄裝載圖像,則調用該事件處理程式。
如果在裝載圖像過程中發生了錯誤,則調用該事件處理程式。
在成功的裝載了圖像時調用該事件處理程式。
link 對象
一個可讀可寫的字元串,指定了link對象的錨部分,包括前導散列符(#)。
一個可讀可寫的字元串,指定了link的url的主機名和端口部分。
一個可讀可寫的字元串,指定了link的url的主機名部分。
一個可讀可寫的字元串,指定了link的完整url。
一個可讀可寫的字元串,聲明了link的url的路徑部分。
一個可讀可寫的字元串,聲明了link的url的端口部分。
一個可讀可寫的字元串,聲明了link的url的協定部分。
一個可讀可寫的字元串,聲明了link的url的查詢部分。
一個可讀可寫的字元串,指定了顯示連結文檔的window對象的名稱。
聲明了出現在連結的标記<a>和</a>之間的文本，僅ns支援。
借助link的屬性，我們可以用來分析url的内容。 function analyzeurlinfo(){
var url = "http://www.google.com:8080/?name=jame&id=13#250";
var el = document.createelement('a');
el.href = url;
var str = "hash: " + el.hash + '/n';
str += "host: " + el.host + '/n';
str += "pathname: " + el.pathname + '/n';
str += "protocol: " + el.protocol + '/n';
str += "search: " + el.search + '/n';
str += "target: " + el.target + '/n';
url分析
anchor對象
anchor對象的名字,該屬性的值由<a>的name性質設定。
該屬性聲明了錨标記<a>和</a>之間的純文字(如果存在)。
相關文章:
javascript核心參考教程--内置對象
javascript核心參考教程--regexp對象