JS中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)
window對(duì)象
ECMAScript是JavaScript的核心，但是如果要在web中使用javascript，那么BOM(瀏覽器對(duì)象模型)才是真正的核心。BOM提供了很多對(duì)象，用于訪問(wèn)瀏覽器的功能，這些功能與任何網(wǎng)頁(yè)內(nèi)容無(wú)關(guān)。
window對(duì)象：BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，它既是通過(guò)javascript訪問(wèn)瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。
因此，所有全局作用域中聲明的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。
<script type="text/javascript">
var age=26;//這里定義的全局變量和全局函數(shù)被自動(dòng)歸在了window對(duì)象名下
function sayAge(){
console.log(this.age);
}
console.log(window.age);//26
sayAge();//26 相當(dāng)于window.sayAge()
window.sayAge();//26
//全局變量和在window對(duì)象上直接定義屬性的唯一區(qū)別：全局變量不能夠通過(guò)delete操作符刪除，而直接在window對(duì)象上定義的屬性可以
window.color='red';
delete window.age;
delete window.color;
console.log(window.age);//26
console.log(window.color);//undefined
</script>
<script type="text/javascript">
/*
還要注意：嘗試訪問(wèn)未聲明的變量會(huì)拋出錯(cuò)誤，但是通過(guò)查詢window對(duì)象，可以知道某個(gè)可能未經(jīng)聲明的變量是否存在
*/
//這會(huì)拋出錯(cuò)誤，因?yàn)閛ldValue未定義
var newValue=oldValue;
//這不會(huì)拋出錯(cuò)誤，因?yàn)槭且淮螌傩圆樵?
var newValue=window.oldValue;
</script>
窗口關(guān)系和框架
如果頁(yè)面中包含框架，則每個(gè)框架都擁有自己的window對(duì)象，并且保存在frames集合中。在frames集合中，可以通過(guò)數(shù)值索引(從0開(kāi)始，從左到右，從上到下)或者框架名稱來(lái)訪問(wèn)相應(yīng)的window對(duì)象。每個(gè)window對(duì)象都有一個(gè)name屬性，其中包含著框架的名稱。
可以通過(guò)window.frames[0]或者window.frames[“topFrame”]來(lái)引用上方的框架。不過(guò)，最好使用top，而不是window來(lái)引用這些框架。因?yàn)椋瑃op對(duì)象始終指向最高(最外)層的框架，也就是瀏覽器窗口。使用它可以確保在一個(gè)框架中正確地訪問(wèn)另一個(gè)框架。因?yàn)閷?duì)于一個(gè)在框架中編寫的任何代碼來(lái)說(shuō)，其中的window對(duì)象指向的都是那個(gè)框架的特定實(shí)例，而不是最高層的框架。
與top相對(duì)的另一個(gè)window對(duì)象是parent。parent對(duì)象始終指向當(dāng)前框架的直接上層框架。
與框架有關(guān)的最后一個(gè)對(duì)象是self，它始終指向window。self和window對(duì)象可以互換使用。
在使用框架的情況下，瀏覽器中會(huì)存在多個(gè)Global對(duì)象。在每個(gè)框架中定義的全局變量會(huì)自動(dòng)成為框架中window對(duì)象的屬性。由于每個(gè)window對(duì)象都包含原生類型的構(gòu)造函數(shù)，因此每個(gè)框架都有一套自己的構(gòu)造函數(shù)，這些構(gòu)造函數(shù)一一對(duì)應(yīng)，但并不相等。
location對(duì)象
location對(duì)象是一個(gè)很特別的對(duì)象，因?yàn)樗仁莣indow對(duì)象的屬性，也是document對(duì)象的屬性。window.location和document.location引用的是同一個(gè)對(duì)象。
location對(duì)象的屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>查詢字符串參數(shù)</title>
</head>
<body>
<script type="text/javascript">
function getQueryStringArgs(){
//取得查詢字符串并去掉開(kāi)頭的問(wèn)號(hào)
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存數(shù)據(jù)對(duì)象
args = {},
//取得每一項(xiàng)
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for循環(huán)中使用
i = 0,
len = items.length;
//逐個(gè)將每一項(xiàng)添加到args對(duì)象中
for (i=0; i < len; i++){
item = items[i].split("=");
//decodeURIComponent用來(lái)解碼name和value,因?yàn)椴樵冏址畱?yīng)該是被編碼過(guò)的
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length){
args[name] = value;
}
}
return args;
}
//假設(shè)查詢字符串是： ?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"
//這樣一來(lái)，每個(gè)查詢字符串參數(shù)都成了返回對(duì)象的屬性，極大地方便了對(duì)每個(gè)參數(shù)的訪問(wèn)
</script>
</body>
</html>
使用location對(duì)象可以通過(guò)很多方式來(lái)改變?yōu)g覽器的位置。
其中，最常用的方式是：使用assign()方法并為其傳遞一個(gè)URL
location.assign(“http://chabaoo.cn“)
這樣就可以立即打開(kāi)新的URL并在瀏覽器的歷史記錄中生成一條記錄。
同樣的，將location.href和window.location設(shè)置為一個(gè)URL值,也會(huì)以該值調(diào)用assign()方法。
location.href=”http://chabaoo.cn”;
window.location=”http://chabaoo.cn”;
這兩種方式的效果和顯示調(diào)用assign()方法效果完全一樣
此外，通過(guò)修改location對(duì)象的其他屬性也可以改變當(dāng)前加載的頁(yè)面。
每次修改location的屬性(hash除外)，頁(yè)面都會(huì)以新的URL重新加載。修改hash的值會(huì)在瀏覽器的歷史記錄中生成一條新的記錄
在url：http://a.com#helloword中的'#helloworld'就是location.hash，改變hash并不會(huì)導(dǎo)致頁(yè)面刷新，所以可以利用hash值來(lái)進(jìn)行數(shù)據(jù)傳遞，當(dāng)然數(shù)據(jù)容量是有限的。
當(dāng)通過(guò)上述任何一種方法修改URL之后，瀏覽器的歷史記錄中就會(huì)生成一條新紀(jì)錄，因此通過(guò)點(diǎn)擊”后退”按鈕都會(huì)導(dǎo)航到前一個(gè)頁(yè)面。
我們可以使用replace()方法來(lái)禁用這種行為。該方法只接受一個(gè)參數(shù)，即要導(dǎo)航到的URL;結(jié)果雖然會(huì)導(dǎo)致瀏覽器位置改變，但不會(huì)在歷史記錄中生成新紀(jì)錄。在調(diào)用replace()方法后，用戶不能回到前一個(gè)頁(yè)面。
這個(gè)頁(yè)面加載到瀏覽器中后，瀏覽器就會(huì)在1秒鐘后重新定向到chabaoo.cn。然后，'后退'按鈕將處于禁用狀態(tài)，如果重新輸入完整的URL，則無(wú)法返回示例頁(yè)面。
<script type="text/javascript">
setTimeout(function () {
location.replace("http://chabaoo.cn/");
}, 1000);
</script>
reload()方法，其作用是重新加載當(dāng)前顯示的頁(yè)面。如果調(diào)用reload()方法時(shí)不傳遞任何參數(shù)，頁(yè)面就會(huì)以最有效的方式重新加載。也就是說(shuō)，如果頁(yè)面自上次請(qǐng)求以來(lái)并沒(méi)有改變過(guò)，頁(yè)面就會(huì)從瀏覽器緩存中重新加載。如果要強(qiáng)制從服務(wù)器重新加載，需要給該方法傳遞參數(shù)true。
location.reload();//重新加載(有可能從緩存中加載)
location.reload(true);//重新加載(從服務(wù)器重新加載)
超時(shí)調(diào)用和間歇調(diào)用
javascript是單線程語(yǔ)言，但允許通過(guò)設(shè)置超時(shí)值和間歇值來(lái)設(shè)定代碼在特定時(shí)刻執(zhí)行
超時(shí)調(diào)用：是在指定的時(shí)間過(guò)后執(zhí)行代碼
間歇調(diào)用：每隔指定的時(shí)間就執(zhí)行一次代碼
超時(shí)調(diào)用：需要使用window對(duì)象的setTimeout()方法，接收兩個(gè)參數(shù)：要執(zhí)行的代碼和以毫秒表示的時(shí)間。
第二個(gè)參數(shù)是一個(gè)表示等待多長(zhǎng)時(shí)間的毫秒數(shù)，但經(jīng)過(guò)該時(shí)間后指定的代碼不一定執(zhí)行。因?yàn)椋琷avascript是一個(gè)單線程的解釋器，因此一定時(shí)間內(nèi)只能執(zhí)行一段代碼。第二個(gè)參數(shù)表示再過(guò)多長(zhǎng)時(shí)間把當(dāng)前任務(wù)添加到隊(duì)列中。如果隊(duì)列是空的，則代碼會(huì)立刻執(zhí)行，否則就要等待前面的代碼執(zhí)行完了以后再執(zhí)行。
調(diào)用setTimeout()后，該方法會(huì)返回一個(gè)數(shù)值ID,表示超時(shí)調(diào)用。要取消未執(zhí)行的超時(shí)調(diào)用計(jì)劃，可以調(diào)用clearTimeout()方法并將相應(yīng)的超時(shí)調(diào)用ID作為參數(shù)傳遞給它即可。
間歇調(diào)用：使用setInterval()方法
與超時(shí)調(diào)用類似，只不過(guò)它會(huì)按照指定的時(shí)間間隔重復(fù)執(zhí)行代碼，直到間歇調(diào)用被取消或者頁(yè)面被卸載。它接收的參數(shù)與setTimeout()方法一樣
Demo1
<script type="text/javascript">
//設(shè)置超時(shí)調(diào)用
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);
//取消超時(shí)調(diào)用
clearTimeout(timeoutId);
</script>
Demo2
<script type="text/javascript">
/*
使用間歇調(diào)用實(shí)現(xiàn)
*/
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber, 500);
</script>
Demo3
<script type="text/javascript">
/*
使用超時(shí)調(diào)用來(lái)實(shí)現(xiàn)
*/
var num = 0;
var max = 100;
function incrementNumber() {
num++;
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);
</script>
在使用超時(shí)調(diào)用時(shí)，沒(méi)有必要跟蹤超時(shí)調(diào)用ID，因?yàn)槊看螆?zhí)行代碼之后，如果不再設(shè)置另一次超時(shí)調(diào)用，調(diào)用就會(huì)自動(dòng)停止。一般認(rèn)為，使用超時(shí)調(diào)用來(lái)模擬間歇調(diào)用是一種最佳模式。間歇調(diào)用一般較少使用，因?yàn)楹笠粋€(gè)間歇調(diào)用可能會(huì)在前一個(gè)間歇調(diào)用結(jié)束之前啟動(dòng)。
系統(tǒng)對(duì)話框
alert()、confirm()和prompt()
<script type="text/javascript">
alert("Hello world!");
</script>
<script type="text/javascript">
/*
判斷用戶點(diǎn)擊了OK還是Cancel，可以檢查confirm()方法返回的布爾值：true表示單擊了OK，false表示單擊了Cancel或單擊了右上角的X按鈕。
*/
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}
</script>
<script type="text/javascript">
/*
prompt()方法用來(lái)生成一個(gè)"提示"框，用于提示用戶輸入一些文本。提示框除了顯示OK和Cancel按鈕之外 ，還會(huì)顯示一個(gè)文本輸入域，用來(lái)輸入文本內(nèi)容。該方法接收兩個(gè)參數(shù)：要顯示給用戶的文本提示和文本輸入域的默認(rèn)值(可以是一個(gè)空字符串)
*/
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}
</script>
history對(duì)象
history對(duì)象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開(kāi)的那一刻算起。因?yàn)閔istory是window對(duì)象的屬性，因此每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)以及每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。處于安全方面的考慮，開(kāi)發(fā)人員是無(wú)法知道用戶瀏覽過(guò)的URL，不過(guò)，借助用戶訪問(wèn)過(guò)的頁(yè)面列表，同樣可以在不知道實(shí)際URL的情況下實(shí)現(xiàn)后退和前進(jìn)。
使用Go()方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向后也可以向前。該方法接收一個(gè)參數(shù)：表示向前或者向后跳轉(zhuǎn)的頁(yè)面數(shù)的整數(shù)值。負(fù)數(shù)表示向后跳轉(zhuǎn)(類似單擊瀏覽器的后退按鈕)，正數(shù)表示向前跳轉(zhuǎn)(類似瀏覽器的前進(jìn)按鈕)。
//后退一頁(yè)
history.go(-1);
//前進(jìn)一頁(yè)
history.go(1);
也可以給go()方法傳遞一個(gè)字符串參數(shù)，此時(shí)瀏覽器會(huì)跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個(gè)位置–可能后退也可能前進(jìn)，具體要看哪個(gè)位置最近。如果歷史記錄中不包含該字符串，那么這個(gè)方法什么也不做
//跳轉(zhuǎn)到最近的jb51.net
history.go("jb51.net");
另外，還可以使用back()和forward()來(lái)代替go()方法
//后退一頁(yè)
history.back();
//前進(jìn)一頁(yè)
history.forward();
除此之外，history對(duì)象還有一個(gè)length屬性，保存著歷史記錄的數(shù)量。這個(gè)數(shù)量包括所有的歷史記錄，即所有的向后和向前的記錄。如果history.length==0，則表示這是用戶打開(kāi)窗口后的第一個(gè)頁(yè)面
history對(duì)象不常用，但是在創(chuàng)建自定義的后退和前進(jìn)按鈕，以及檢測(cè)當(dāng)前頁(yè)面是不是用戶歷史記錄的第一個(gè)頁(yè)面時(shí)，還是必須使用它。
Demo1
history.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>history</title>
</head>
<body>
<form>
<input type="text" id="username">
</form>
<input type="button" id="btn" value="按鈕" onclick="go()">
<script type="text/javascript">
function go(){
var name=document.getElementById("username").value;
if(name=="hello"){
history.go(-1);
}else{
alert('用戶名不正確');
}
}
</script>
</body>
</html>
ceshi.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <a href="history.html" >跳轉(zhuǎn)</a> </body> </html>
這里使用history模仿了一個(gè)輸入用戶名之后。跳轉(zhuǎn)到之前頁(yè)面的例子。
Demo2
history2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>history</title>
</head>
<body>
<a href="demo.html">跳轉(zhuǎn)</a>
<input type="button" id="btn" value="前進(jìn)" onclick="go()">
<script type="text/javascript">
function go(){
history.forward();
}
</script>
</body>
</html>
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<input type="button" name="" value="回退" id="btn" onclick="fn()">
<script type="text/javascript">
function fn(){
history.back();
}
</script>
</body>
</html>
這個(gè)小例子模擬了history.back()和history.forward()的基本功能
以上就是小編為大家?guī)?lái)的JS中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
wap瀏覽自動(dòng)跳轉(zhuǎn)到wap頁(yè)面的js代碼
這篇文章主要介紹了如何讓用戶輸入wap手機(jī)網(wǎng)站的網(wǎng)址時(shí)自動(dòng)跳轉(zhuǎn)到wap網(wǎng)站,需要的朋友可以參考下2014-05-05
微信小程序開(kāi)發(fā)越來(lái)越多樣化,各種豐富的設(shè)計(jì)及體驗(yàn),自定義tabBar也經(jīng)常使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何自定義tabBar的相關(guān)資料,需要的朋友可以參考下2021-08-08
jqplot通過(guò)ajax動(dòng)態(tài)畫折線圖的方法及思路
這篇文章主要介紹了2013-12-12
這篇文章主要介紹了微信小程序Echarts覆蓋正常組件問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JSONP原理及簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript基礎(chǔ)知識(shí)及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分，所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架，學(xué)好JAVASCRIPT是最重要的，通過(guò)本篇文章給大家介紹javascript基礎(chǔ)知識(shí)及常用方法總結(jié)，對(duì)js基礎(chǔ)知識(shí)及常用方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JS的location.href跳出框架打開(kāi)新頁(yè)面的方法
登錄頁(yè)面在框架內(nèi)打開(kāi)，想讓它直接跳出框架打開(kāi)（這里不是打開(kāi)新窗口），終于在網(wǎng)上找到了辦法，下面分享給大家2014-09-09
html2canvas屬性和使用方法以及如何使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片
為大家介紹一款JS截圖插件html2canvas.js， 它可以通過(guò)純JS對(duì)瀏覽器端經(jīng)行截屏,下面就為大家介紹一下html2canvas.js屬性和具體使用方法，并為大家提供了一個(gè)實(shí)例2020-01-01
這篇文章主要介紹了微信小程序上拉加載和下拉刷新功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
獲得Javascript對(duì)象屬性個(gè)數(shù)的示例代碼
這篇文章主要是對(duì)獲得Javascript對(duì)象屬性個(gè)數(shù)的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11