前言
ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript涩拙,那么BOM(瀏覽器對象模型)則無疑才是真正的核心唉擂。BOM提供了很多對象想帅,用于訪問瀏覽器的功能睁本,這些功能與任何網(wǎng)頁內(nèi)容無關(guān)尿庐。多年來,缺少事實上的規(guī)范導致BOM既有意思又有問題添履,因為瀏覽器提供商會按照各自的想法隨意去擴展它。于是脑又,瀏覽器之間的共有的對象就成為了事實上的標準暮胧。W3C為了把瀏覽器中JavaScript最基本的部分標準化,已經(jīng)將BOM的主要方面納入了HTML5規(guī)范中问麸。
window對象
BOM的核心對象往衷,表示一個瀏覽器的一個實例。在瀏覽器中严卖,window對象有雙重角色席舍,它既是通過JavaScript訪問瀏覽器窗口的一個接口荸恕,又是ECMAScript規(guī)定了Global對象球凰。這意味著在網(wǎng)頁中定義的任何對象、變量囤躁、函數(shù)都是window作為其Global對象稠肘,因此有權(quán)訪問parseInt()方法福铅。
全局作用域
全局作用域中所有聲明的變量、函數(shù)都會變成window對象的屬性和方法项阴。
var age = 29;
function sayAge() {
console.log(this.age);
}
console.log(window.age); // 29
sayAge(); // 29
window.sayAge(); // 29
拋開全局變量會成為window對象的屬性不談滑黔,定義全局變量與在window對象上直接定義屬性還是有一點差別:全局變量不能通過delete操作符刪除,而直接在window對象上的定義的屬性可以环揽。
var age = 29;
window.color = "red";
// 在IE<9時拋出錯誤略荡,其他所有瀏覽器返回false
delete window.age;
// 在IE<9時拋出錯誤,其他所有瀏覽器返回true
delete window.color; // return true
console.log(window.age); // 29
console.log(window.color); // undefined
使用var語句添加的window屬性有一個名為[[Configurable]]的特性歉胶。這個特性的值被設(shè)置為false汛兜,因此這樣定義的屬性不可以通過delete操作符刪除。
嘗試訪問未聲明的變量會拋出錯誤通今,但是通過查詢window對象序无,可以知道某個可能未聲明的變量是否存在验毡。
// 這里會拋出錯誤,因為oldValue未定義
var newValue = oldValue;
// 這里不會拋出錯誤帝嗡,因為這是一次屬性查詢
// newValue的值是undefined
var newValue = window.oldValue;
窗口位置
screenLeft 和 screenTop
分別表示窗口相對于屏幕左邊和上邊的位置晶通。Firefox則在screenX和screenTop屬性中提供相同的窗口位置信息,使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置哟玷。
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
首先確定screenLeft和screenTop是否存在狮辽,是則取得這兩個屬性值,不存在則使用另外的screenX和screenY巢寡。
有一些區(qū)別
對于IE喉脖、Opera瀏覽器:高度值包括瀏覽器工具欄
對于Chrome、Firefox抑月、safari:和上面相反树叽,高度值不包含工具欄那塊兒。
更讓人無語的是谦絮,F(xiàn)irefox题诵、safari和chrome始終返回頁面中每個框架的top.screenX和top.screenY值,即使在頁面由于被設(shè)置了外邊距而發(fā)生偏移的情況下层皱,相對于window對象使用screenX和screenY每次也都會返回相同的值性锭。而IE和Opera則會給出框架相對于屏幕邊界的精確坐標。
最終結(jié)果叫胖,就是無法在夸瀏覽器的條件下取得窗口左邊和上邊的精確坐標值草冈。
窗口大小
innerWidth 、innerHeight瓮增、outerWidth怎棱、outerHeight。
支持IE9+绷跑,F(xiàn)irefox蹄殃,safari,opera你踩,chrome均支持诅岩。
innerWidth:表示頁面視圖區(qū)的度(減去邊框?qū)挾龋?br> innerHieght:表示頁面視圖區(qū)高度(減去邊框?qū)挾龋?/p>
outerWidth:返回瀏覽器窗口本身長度。
outerHeight:返回瀏覽器窗口本身高度带膜。
Chrome:
IE:均取得undefined吩谦,情況未知。
在IE膝藕,F(xiàn)irefox式廷,safari,opera芭挽,chrome中滑废,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面視口的信息蝗肪。IE6中,這些屬性必須在標準模式下才有效蠕趁;如果是混雜模式薛闪,必須通過document.body.client(Width/Height)取得相同信息。
而對于chrome俺陋,哪種都行豁延。
雖然最終無法確定瀏覽器窗口本身大小,但是可以取得頁面視口大小腊状。
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
先將window.innerWidth/innerHeight的值分別賦給了pageWidth和pageHeight诱咏。檢查pageWidth中是否是一個數(shù)值,不是缴挖,則通過檢查compatMode確定頁面是否處于標準模式袋狞,是,則使用document.documentElement.clientWidth/clientHeight的值映屋。否則苟鸯,使用document.body.clientWidth/clientHeight的值。
使用resizeTo()和resizeBy()方法可以調(diào)整瀏覽器窗口大小秧荆。
resizeTo:接受瀏覽器窗口的新寬度和新高度
resizeBy:接受新窗口與原窗口的寬度之差和高度之差
從 Firefox 7 開始倔毙,不能改變?yōu)g覽器窗口的大小了埃仪,要依據(jù)下面的規(guī)則:
- 不能設(shè)置那些不是通過 window.open 創(chuàng)建的窗口或 Tab 的大小乙濒。
- 當一個窗口里面含有一個以上的 Tab 時,無法設(shè)置窗口的大小卵蛉。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<input type="button" value="創(chuàng)建窗口">
<input type="button" value="resizeTo()">
<input type="button" value="resizeBy()">
</body>
<script>
var btn = document.getElementsByTagName("input")[0];
var btn2 = document.getElementsByTagName("input")[1];
var btn3 = document.getElementsByTagName("input")[2];
var z;
btn.onclick = function () {
z = window.open("", "", "width=100,height=100");
z.focus();
}
btn2.onclick = function () {
z.resizeTo(500, 500);
z.focus();
}
btn3.onclick = function () {
z.resizeBy(100, 100);
z.focus();
}
</script>
</html>
導航和打開窗口
使用window.open()方法既可以導航到一個特定的URL颁股,也可以打開一個新的瀏覽器窗口。這個方法接受4個參數(shù):要加載的URL傻丝、窗口目標甘有、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史紀錄中當前加載頁面的布爾值。通常只傳遞一個參數(shù)葡缰,最后一個參數(shù)只在不打開新窗口的情況下使用亏掀。
如果為window.open()傳遞了第二個參數(shù),而且該參數(shù)是已有窗口或框架的名稱泛释,那么就會在具有該名稱的窗口或框架中加載第一個參數(shù)指定的URL滤愕。
window.open("http://www.wrox.com/","topFrame");
// 等同于:<a target="topFrame"></a>
彈出窗口
如果給window.open()傳遞的第二個參數(shù)不是一個已經(jīng)存在的窗口或框架,那么該方法就會根據(jù)在第三個參數(shù)位置上傳入的字符串創(chuàng)建一個新窗口或新標簽頁怜校。如果沒有傳入第三個參數(shù)间影,那么就會打開一個帶有全部默認設(shè)置(工具欄、地址欄茄茁、狀態(tài)欄)的新瀏覽器窗口魂贬。
第三個參數(shù)是一個逗號分隔的設(shè)置字符串巩割,表示新窗口中都顯示哪些特性。
設(shè)置 值 說明
fullscreen yes或no 表示瀏覽器窗口是否最大化付燥,僅限IE
height 數(shù)值 表示新窗口的高度宣谈,不能小于100
left 數(shù)值 表示新窗口的左坐標。不能是負值
location yes或no 表示是否在瀏覽器窗口中顯示地址欄机蔗,不同瀏覽器默認值不同
menubar yes或no 表示是否在瀏覽器窗口中顯示菜單欄蒲祈,默認值為no
resizable yes或no 表示是否可以通過拖動瀏覽器窗口的邊框改變其大小,默認值為no
scrollbars yes或no 表示如果內(nèi)容在視口中顯示不下萝嘁,是否允許滾動梆掸。默認值為no。
status yes或no 表示是否在瀏覽器窗口中顯示狀態(tài)欄牙言。默認值為no
toolbar yes或no 表示是否在瀏覽器窗口中顯示工具欄酸钦。默認值為no
top 數(shù)值 表示新窗口的上坐標,不能是負值咱枉。
width 數(shù)值 表示新窗口的寬度卑硫,不能小于100。
window.open("http://www.wrox.com","wroxWindow","height=400蚕断,width=400,top=10,left=10,resizable=yes");
這段代碼會打開一個新的可以調(diào)整大小的窗口欢伏,窗口初始大小為400*400像素,并且距屏幕上沿和左邊各10像素亿乳。
window.open()方法會返回一個指向新窗口的引用硝拧。引用的對象與其他window對象大致相似,但我們可以對其進行更多控制葛假。例如障陶,有些瀏覽器在默認情況下可能不允許我們針對主瀏覽器窗口調(diào)整大小或移動位置,但卻允許我們針對通過window.open()創(chuàng)建的窗口調(diào)整大小或移動位置聊训。
var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
// 調(diào)整大小
wroxWin.resizeTo(500,500);
// 移動位置
wroxWin.moveTo(100,100);
調(diào)用close()方法還可以關(guān)閉新打開的窗口抱究。
wroxWin.close();
但是,這個方法僅適用于通過window.open()打開的彈出窗口带斑。對于瀏覽器的主窗口鼓寺,如果沒有得到用于允許是不能關(guān)閉它的。不過勋磕,彈出窗口倒是可以調(diào)用top.close()在不經(jīng)用戶允許的情況下關(guān)閉自己妈候。彈出窗口關(guān)閉之后,窗口的引用仍然還在朋凉,但除了像下面這樣檢測其closed屬性之外州丹,已經(jīng)沒有其他用處了。
wroxWin.close();
alert(wroxWin.closed); // true
新創(chuàng)建的window對象有一個opener屬性,其中保存著打開它的原始窗口對象墓毒。這個屬性只在彈出窗口中的最外層window對象(top)中有定義吓揪,而且指向調(diào)用window.open()的窗口或框架。
間歇調(diào)用與超時調(diào)用
JavaScript是單線程語言所计,但它允許通過設(shè)置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行柠辞。前者是在指定的時間過后執(zhí)行代碼,后者則是在每隔指定的時間就執(zhí)行一次代碼主胧。
超時調(diào)用需要使用window對象的setTimeout()方法叭首,接受兩個參數(shù),要執(zhí)行的代碼和以毫秒表示的時間(即在執(zhí)行代碼前需要等待多少毫秒)踪栋。其中焙格,第一個參數(shù)可以是一個包含JavaScript代碼的字符串(就和在eval()函數(shù)中使用的字符串一樣),也可以是一個函數(shù)夷都。
// 不建議傳遞字符串眷唉!
setTimeout("alert('hello world!')",1000);
// 推薦的調(diào)用方式
setTimeout(function() {
alert("Hello World!")
},1000);
雖然這兩種調(diào)用方式都沒有問題,但由于傳遞字符串可能導致性能損失囤官,因此不建議字符串作為第一個參數(shù)冬阳。
第二個參數(shù)是一個表示等待多長時間的毫秒數(shù),但經(jīng)過該時間后指定的代碼不一定會執(zhí)行党饮。JavaScript是一個單線程的解釋器肝陪,因此一定時間內(nèi)只能執(zhí)行一段代碼。為了控制要執(zhí)行的的代碼刑顺,就有一個JavaScrip任務(wù)隊列氯窍。這些任務(wù)會按照將它們添加到隊列的順序執(zhí)行。setTimeout()的第二個參數(shù)告訴JavaScript再過多長時間把當前任務(wù)添加到隊列中捏检。如果隊列是空的荞驴,那么添加的代碼會立即執(zhí)行不皆;如果隊列不是空的贯城,那么它就要等前面的代碼執(zhí)行完畢以后再執(zhí)行。
調(diào)用setTimeout()之后霹娄,該方法會返回一個ID能犯,表示超時調(diào)用,這個超時調(diào)用ID是計劃執(zhí)行代碼的唯一標識符犬耻,可以通過它來取消超時調(diào)用踩晶。要取消尚未執(zhí)行的超時調(diào)用計劃,可以使用clearTimeout()方法枕磁,并將相應(yīng)的ID傳遞給它渡蜻。
var timeoutId = setTimeout(function() {
alert("Hello World!")
},1000);
clearTimeout(timeoutId);
只要是在指定的時間尚未過去之前調(diào)用clearTimeout(),就可以完全取消超時調(diào)用。前面的代碼在設(shè)置超時調(diào)用之后馬上又調(diào)用了clearTimeout()茸苇,結(jié)果就跟什么都沒發(fā)生一樣排苍。
超時調(diào)用的代碼是在全局作用域中執(zhí)行的,因此函數(shù)中this的值在非嚴格模式下指向window對象学密,在嚴格模式下是undefined淘衙。
間歇調(diào)用與超時調(diào)用類似,只不過它會按照設(shè)置的時間間隔重復(fù)執(zhí)行代碼腻暮。
setInterval("alert('Hello World!')",10000);
// 推薦
setInterval(function() {
alert("hello world!");
},10000);
取消間歇調(diào)用的重要性遠遠高于取消超時調(diào)用彤守,因此在不加干涉的情況下,間歇調(diào)用將會一直執(zhí)行到頁面卸載哭靖。
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
// 如果執(zhí)行次數(shù)達到了max設(shè)定的值具垫,則取消后續(xù)尚未執(zhí)行的調(diào)用
if (num == max) {
clearInterval(intervalId);
alert('Done');
}
}
intervalId = setInterval(incrementNumber,500);
變量num每半秒遞增一次,當遞增到最大值時就會取消先前設(shè)定的間歇調(diào)用试幽。這個模式也可以使用超時調(diào)用來實現(xiàn)做修。
var num = 0;
var max = 10;
function incrementNumber() {
num++;
if (num < max) {
setTimeout(incrementNumber,500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber,500);
可見,在使用超時調(diào)用時抡草,沒有必要跟蹤超時調(diào)用ID饰及,因此每次執(zhí)行代碼之后,如果不在設(shè)置另一次調(diào)用康震,調(diào)用自動會停止燎含。
一般認為,使用超時調(diào)用來模擬間歇調(diào)用是一種最佳模式腿短。在開發(fā)環(huán)境下屏箍,很少使用真正的間歇調(diào)用,原因是后一個間歇調(diào)用可能會在前一個間歇調(diào)用結(jié)束之前啟動橘忱,而像前面示例中那樣使用超時調(diào)用可以避免這一點赴魁,所以最好不要使用間歇調(diào)用。
系統(tǒng)對話框
alert()
alert()接受一個字符串并將其顯示給用戶钝诚。具體來說颖御,調(diào)用alert()方法的結(jié)果就是向用戶顯示一個系統(tǒng)對話框,其中包含指定的文本和一個OK按鈕凝颇。
通常使用alert()生成的警告對話框向用戶顯示一些他們無法控制的消息潘拱,例如錯誤消息。而用戶看完消息后關(guān)閉對話框拧略。
confirm()
confirm()方法芦岂,從向用戶顯示消息的方面看,這種確認對話框很像一個警告對話框垫蛆,但二者的主要區(qū)別在于確認對話框除了顯示OK按鈕外禽最,還會顯示一個Cancel按鈕腺怯,兩個按鈕可以讓用戶決定是否執(zhí)行給定操作。
confirm("Are you sure?");
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure!");
} else {
alert("I'm sorry to hear you're not sure.");
}
為了確定用戶是單擊了OK還是Cancel川无,可以檢查confirm方法返回的布爾值瓢喉。OK按鈕返回true,Cancel按鈕返回false舀透。右上角關(guān)閉按鈕和ESC也會返回false栓票。
prompt()
這是一個提示框,用于提示用戶輸入一些文本信息愕够,提示框中除了顯示OK和Cancel按鈕外走贪,還會顯示一個文本輸入域。
prompt()方法接受兩個參數(shù):要顯示給用戶的文本提示和文本輸入域的默認值(可以是一個空字符串)惑芭。
如果用戶單擊了OK按鈕坠狡,則prompt返回文本輸入域的值;
如果用戶單擊了cancel按鈕或沒有單擊OK按鈕而是通過其他方式關(guān)閉對話框遂跟,則該方法返回null逃沿。
var result = prompt("What is your name?","");
if (result !== null) {
alert("Welcome, "+result);
}
這些系統(tǒng)對話框很適合向用戶顯示消息并請用戶作出決定。由于不涉及HTML幻锁,CSS或JavaScript凯亮,因此它們是增強Web應(yīng)用程序的一種便攜方式。
·---
location對象
location是最有用的BOM對象之一哄尔,提供了與當前窗口加載的文檔有關(guān)的信息假消,提供了一些導航功能。
location對象既是window對象的屬性岭接,也是document對象的屬性富拗。
document.location === window.location; // true
它們均引用自同一個對象。location對象的用戶不只表現(xiàn)在它保存著當前文檔的信息鸣戴,還表現(xiàn)在它將URL解析為獨立的片段啃沪,讓開發(fā)人員可以通過不同的屬性訪問這些片段。
屬性方法
MDN——location
查詢字符串參數(shù)
訪問URL包含的查詢字符串的屬性并不方便窄锅。盡管location.search返回從問號到URL末尾的所有內(nèi)容创千,但卻沒有方法逐個訪問其中的每個查詢字符串參數(shù)〕曷耍可以創(chuàng)建一個函數(shù)签餐,用以解析查詢字符串寓涨,然后逐個返回包含所有參數(shù)的一個對象:
function getQueryStringArgs() {
// 取得查詢字符串并去掉開頭的問號
var qs = location.search.length > 0 ? location.search.substring(1) : "";
// 保存數(shù)據(jù)的對象
var args = {};
// 取得每一項
var items = qs.length ? qs.split("&") : [];
var item = null;
var name = null;
var value = null;
// 在for循環(huán)中使用
var i = 0;
var len = items.length;
// 逐個將每一項添加到args對象中
for (i=0;i<len;i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
tips1
location.href中指定URL時必須為絕對路徑盯串,否則會以相對路徑跳轉(zhuǎn)。
window.location.href = "www.baidu.com";
會被認為是戒良,打開當前路徑下的www.baidu.com文件体捏。
所以需要指定絕對路徑:
window.location.;
位置操作
使用location對象可以通過很多方式來改變?yōu)g覽器的位置。首先,也是最常用的方式几缭,就是使用assign()方法并為其傳遞一個URL河泳,如下所示。
location.assign("http://www.wrox.com");
這樣年栓,就可以立即打開新URL并在瀏覽器的歷史紀錄中生成一條紀錄拆挥。如果是將location.href或window.location設(shè)置為一個URL值,也會以該值調(diào)用assign()方法某抓。例如纸兔,下列兩行代碼與顯示調(diào)用assign()方法的效果完全一樣。
window.location = "http://www.wrox.com";
location.;
在這些改變?yōu)g覽器位置的方法中否副,最常用的就是location.href屬性汉矿。
另外,修改location對象的其他屬性也可以改變當前加載的頁面备禀,下面的例子展示了通過將hash洲拇,search,hostname曲尸,pathname赋续,port屬性設(shè)置為新值改變URL。
//假設(shè)初始URL為http://www.wrox.com/WileyCDA/
//將URL修改為"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1"
// 將URL修改為"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
// 將URL修改改為"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
// 將URL修改為"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
// 將URL修改為"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
當通過上述任何一種方式修改URL之后另患,瀏覽器的歷史紀錄就會生成一條新紀錄蚕捉,因此用戶通過單擊“后退”按鈕都會導航到前一個頁面。要禁用這種行為柴淘,可以使用replace()方法迫淹,方法接受一個參數(shù),既要導航到的URL为严;結(jié)果雖然會導致瀏覽器位置改變敛熬,但不會在歷史紀錄中生成新紀錄。在調(diào)用replace()方法之后第股,用戶不能回到前一個頁面应民。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>You won't be able to get back here</title>
</head>
<body>
<p>Enjoy this page for a second, because you won't be coming back here.</p>
</body>
<script>
setTimeout(function() {
location.replace("http://www.wrox.com");
},1000);
</script>
</html>
將這個頁面加載到瀏覽器中,瀏覽器會在1秒鐘之后重新定向到www.wrox.com夕吻。然后诲锹,后退按鈕將處于禁用狀態(tài),如果不重新輸入完整的URL涉馅,則無法返回示例頁面归园。
與位置有關(guān)的最后一個方法是reload(),作用是重新加載當前顯示的頁面稚矿,如果調(diào)用reload()時不傳遞任何參數(shù)庸诱,頁面就會以最有效的方式重新加載捻浦。也就是說,如果頁面自上次請求以來并沒有改變過桥爽,頁面就會從瀏覽器緩存中重新加載朱灿。如果要強制從服務(wù)器中重新加載,則需要像下面這樣為該方法傳遞參數(shù)true钠四。
location.reload(); // 重新加載(有可能從緩存中加載)
location.reload(true); // 重新加載(從服務(wù)器重新加載)
位于reload()調(diào)用之后的代碼可能會也可能不會執(zhí)行盗扒,這要取決于網(wǎng)絡(luò)延遲或系統(tǒng)資源等因素,為此缀去,最好將reload()放在代碼最后一行环疼。
navigator對象
MDN——navigator
screen對象
MDN——screen
screen對象基本上只用來表明客戶端的能力,其中包括瀏覽器窗口外部的顯示器的信息朵耕,如像素寬度和高度等炫隶,每個瀏覽器的screen對象都包含著各不相同的屬性。
history對象
MDN——history
history對象保存著用戶上網(wǎng)的歷史紀錄阎曹,從窗口被打開的那一刻算起伪阶,因為history是window對象的屬性,因此每個瀏覽器窗口处嫌、每個標簽頁乃至每個框架栅贴,都有自己的history對象與特定的window對象關(guān)聯(lián)。出于安全方面考慮熏迹,開發(fā)人員無法得知用戶瀏覽過的URL檐薯,不過,借由用戶訪問過的頁面列表注暗,同樣可以在不知道實際URL的情況下實現(xiàn)后退和前進坛缕。
使用go()方法可以在用戶的歷史紀錄中任意跳轉(zhuǎn),可以向后也可以向前捆昏。這個方法接受一個參數(shù)赚楚,表示向后或者向前跳轉(zhuǎn)的頁面數(shù)的一個整數(shù)值。負數(shù)表示向后跳轉(zhuǎn)(類似單擊瀏覽器后退按鈕)骗卜,正數(shù)表示向前跳轉(zhuǎn)(類似于單擊瀏覽器的前進按鈕)宠页。
// 后退一頁
history.go(-1);
// 前進一頁
history.go(1);
// 前進兩頁
history.go(2);
也可以給go()方法傳遞一個字符串參數(shù),此時瀏覽器會跳轉(zhuǎn)到歷史紀錄中包含該字符串的第一個位置寇仓,可能后退举户,也可能前進,具體要看哪個位置最近遍烦,如果歷史紀錄中不包含該字符串俭嘁,那么這個方法什么也不做,例如:
// 跳轉(zhuǎn)到最近的wrox.com頁面
history.go("wrox.com");
// 跳轉(zhuǎn)到最近的nczonline.net頁面
history.go("nczonline.net");
另外乳愉,還可以使用兩個簡寫方法back()和forward()來代替go()兄淫。
// 后退一頁
history.back();
// 前進一頁
history.forward();
除了上述幾個方法屯远,history對象還有一個length屬性蔓姚,保存著歷史紀錄的數(shù)量捕虽。這個數(shù)量包括所有的歷史紀錄,即所有向后和向前的紀錄坡脐。對于加載窗口泄私、標簽頁或框架中的第一個頁面而言,history.length等于0备闲。通過下面這些測試晌端,可以確定用戶是否一開始就打開你的頁面
if (history.length == 0) {
// 這應(yīng)該是用戶打開窗口后的第一個頁面
}
雖然history并不常用,但是在創(chuàng)建自定義后退和前進按鈕恬砂,以及檢測當前頁面是不是用戶歷史紀錄中的第一個頁面時咧纠,還是必須使用它。