BOM

前言

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;

窗口位置

screenLeftscreenTop
分別表示窗口相對于屏幕左邊和上邊的位置晶通。Firefox則在screenXscreenTop屬性中提供相同的窗口位置信息,使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置哟玷。

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瀏覽器:高度值包括瀏覽器工具欄

IE

對于Chrome、Firefox抑月、safari:和上面相反树叽,高度值不包含工具欄那塊兒。


chrome

更讓人無語的是谦絮,F(xiàn)irefox题诵、safari和chrome始終返回頁面中每個框架的top.screenX和top.screenY值,即使在頁面由于被設(shè)置了外邊距而發(fā)生偏移的情況下层皱,相對于window對象使用screenX和screenY每次也都會返回相同的值性锭。而IE和Opera則會給出框架相對于屏幕邊界的精確坐標。
最終結(jié)果叫胖,就是無法在夸瀏覽器的條件下取得窗口左邊和上邊的精確坐標值草冈。


窗口大小

innerWidthinnerHeight瓮增、outerWidth怎棱、outerHeight
支持IE9+绷跑,F(xiàn)irefox蹄殃,safari,opera你踩,chrome均支持诅岩。

innerWidth:表示頁面視圖區(qū)的度(減去邊框?qū)挾龋?br> innerHieght:表示頁面視圖區(qū)高度(減去邊框?qū)挾龋?/p>

outerWidth:返回瀏覽器窗口本身長度。
outerHeight:返回瀏覽器窗口本身高度带膜。


Chrome:

chrome最大化.jpg
瀏覽器F11全屏下.jpg
任意縮小.jpg

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)建自定義后退和前進按鈕恬砂,以及檢測當前頁面是不是用戶歷史紀錄中的第一個頁面時咧纠,還是必須使用它


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末泻骤,一起剝皮案震驚了整個濱河市漆羔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌狱掂,老刑警劉巖演痒,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異趋惨,居然都是意外死亡鸟顺,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門器虾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來讯嫂,“玉大人,你說我怎么就攤上這事兆沙《艘Γ” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵挤悉,是天一觀的道長渐裸。 經(jīng)常有香客問我,道長装悲,這世上最難降的妖魔是什么昏鹃? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮诀诊,結(jié)果婚禮上洞渤,老公的妹妹穿的比我還像新娘。我一直安慰自己属瓣,他們只是感情好载迄,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布讯柔。 她就那樣靜靜地躺著,像睡著了一般护昧。 火紅的嫁衣襯著肌膚如雪魂迄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天惋耙,我揣著相機與錄音捣炬,去河邊找鬼。 笑死绽榛,一個胖子當著我的面吹牛湿酸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播灭美,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼推溃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了届腐?” 一聲冷哼從身側(cè)響起铁坎,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎梯捕,沒想到半個月后厢呵,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡傀顾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年襟铭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片短曾。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡寒砖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出嫉拐,到底是詐尸還是另有隱情哩都,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布婉徘,位于F島的核電站漠嵌,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏盖呼。R本人自食惡果不足惜儒鹿,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望几晤。 院中可真熱鬧约炎,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至狸捕,卻和暖如春喷鸽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背府寒。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工魁衙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留报腔,地道東北人株搔。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像纯蛾,于是被迫代替她去往敵國和親纤房。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容

  • ??ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript碰煌,那么...
    霜天曉閱讀 878評論 0 0
  • ECMAScript 是 JavaScript 的核心舒岸,但如果要在 Web 中使用 JavaScript,那么 B...
    劼哥stone閱讀 818評論 2 5
  • BOM是瀏覽器對象模型 Window對象 BOM 的核心對象是window芦圾,它表示瀏覽器的一個實例蛾派。 在瀏覽器中,...
    shanruopeng閱讀 442評論 0 1
  • 開發(fā)中使用WebView加載url个少、html標簽必不可少洪乍,比如廣告、活動界面通過WebView加載具有實效性夜焦。下面...
    _SHYII閱讀 3,824評論 0 10
  • 折騰了很久壳澳,終于找到可行的例子demo分3部分,1茫经, c module文件巷波,需要為python項目單獨建立#inc...
    liantz閱讀 444評論 0 0