javascript學習筆記——BOM的物件:window(核心)、location、history
1.window物件
1.1 全域性作用域
BOM的核心物件是window,它表示瀏覽器的例項;
在瀏覽器中,window物件既是通過js訪問瀏覽器視窗的一個介面,又是ES規定的Global物件;
所有在全域性作用域中宣告的變數、函式都會變成window物件的屬性和方法
全域性變數不能通過delete操作符刪除,而未宣告直接賦值或者是在window物件直接定義的屬性可以;
嘗試訪問未宣告的變數會丟擲錯誤,但是通過查詢window物件,可以知道某個可能未宣告的變數是否存在;
var globalval=1; function test(){ localval=2; } window.globalval1=3; delete.globalval; //false delete.localval; //true delete.globalval1; //true
1.2視窗關係及框架
如果頁面中包含框架(<frame>),則每個框架都包含一個window物件,並且儲存在frames集合中,在該集合中可以通過數值索引(從0開始、從左到右、從上到下)或者框架名稱來訪問相應的window物件.。
每個window物件都有一個name屬性,其中包含框架的名稱;除非最高層的視窗是通過window.open()開啟的,否則window物件的name屬性不會包含任何值;
window.frames[0];
window.frame["topFrame"];
//<=>
top.frames[0];
window物件指向的是那個框架的特定例項,而非最高層的框架;
top物件始終指向最高層的框架,即瀏覽器視窗;
parent物件始終指向當前框架的直接上層框架
在沒有框架的情況下,parent物件等於top物件等於window物件;
self物件,始終指向window物件;
訪問物件:window.top window.parent window.self
在使用框架的情況下,瀏覽器中會存在多個Global物件,每個框架中定義的全域性變數會自動成為框架中window的屬性;
1.3視窗位置
表示視窗相對於螢幕左邊和上邊的位置,IE、Safari、Opera、和Chrome瀏覽器中用screenLeft和screenTop屬性表示;Firefox瀏覽器用screenX和screenY屬性表示;
//跨瀏覽器取得視窗左邊和上邊的位置
var leftPos=(typeOf window.screenLeft=="number")?window.screenLeft:window.screenX;
var topPos=(typeOf window.screenTop=="number")?window.screenTop:window.screenY;
將視窗精確移動到一個新位置的方法;
moveTo(x,y) 新位置的x,y座標
moveBy(x,y) 表示的是在水平和垂直方向上移動的畫素數
這兩個方法可能會被瀏覽器禁用(Opera和IE7預設禁用),還有就是這兩個方法不適用於框架,只能對最外層的window物件使用
//將視窗移動到螢幕左上角
window.move(0,0);
//將視窗向下移動100畫素
window.moveBy(0,100);
1.4視窗大小
由於各個瀏覽器對於視窗大小獲取方式在各有不同,在標準模式和混雜模式下也有所不同,因此無法瀏覽器視窗本身的大小,但是可以取得視口的大小,程式碼實現見P198頁
clientWidth:視口的寬度
clientHeight:視口的高度
調整瀏覽器視窗大小的方法:
resizeTo(x,y) x,y表示瀏覽器視窗的新寬度和新高度
resizeBy(x,y) x.y接收新視窗與原視窗的寬度和高度之差
這兩個方法可能會被瀏覽器禁用(Opera和IE7預設禁用),還有就是這兩個方法不適用於框架,只能對最外層的window物件使用
//調整到100*100
window.resizeTo(100,100);
//調整到200*100
window.resizeBy(100,50);
1.5導航和開啟視窗
window.open()方法既可以導航到一個特定的URL,也可以開啟一個新的瀏覽器視窗;
window.open(要載入的URL,視窗目標,特定字串,表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布林值),返回的是新視窗的引用;
通常只需傳遞第一個引數,最後一個引數只在不開啟新視窗的情況下使用;
如果有第二個引數,則該引數是已有視窗或框架的名稱;特殊的視窗名稱也可以是:_self,_parent,_top,_blank
//等同於 <a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com","topFrame");
如果不是一個已經存在的視窗或框架,則可以設定第三個引數,該引數是用於定義新視窗顯示哪些特性,如果沒有參入第三個引數,那麼開啟的新視窗或框架將是預設設定的;在不開啟新視窗的情況下,會忽略第三個引數;
該引數是一個用逗號分隔的設定字串。整個特性字串不允許出現空格;
var=wroxWin=window.open("http://www.wrox.com","wroxWindow","height=400,width=400,top=10,left=10,resizeable=yes");
//調整新視窗的大小
wroxWin.resizeTo(500,500);
//移動位置
wroxWin.moveTo(100,100);
//關閉新開啟的視窗
wroxWin.close();
close()僅僅適用於通過open方法開啟的彈出視窗
瀏覽器的主視窗如果沒有使用者的允許是不能關閉的,呼叫top.close()可以在不經過使用者允許的情況下關閉自己;
視窗關閉之後引用還在,可以通過 wroxWin.closed 測試引用是否還在,返回true說明引用還在;
wroxWin.opener儲存著開啟它的原始視窗物件;
var=wroxWin=window.open("http://www.wrox.com","wroxWindow","height=400,width=400,top=10,left=10,resizeable=yes");
wroxWin.opener=null;
opener屬性設定為null就是告訴瀏覽器新建立的標籤頁不需要與開啟它的標籤頁通訊,因此可以獨立的程序中執行。標籤頁之間的聯絡一旦切斷,將沒有辦法恢復。
大多數瀏覽器都內建有彈出視窗遮蔽程式,沒有也可以安裝程式擴充套件;
1)如果是瀏覽器內建的遮蔽程式阻止的彈出視窗,那麼window.open()很可能會返回null;
2)如果是瀏覽器擴充套件或其他程式阻止的彈出視窗,那麼window.open()通常會丟擲一個錯誤;
要在任何情況下都能檢測開啟的彈出視窗是否被遮蔽,則程式碼應如下:
var blocked=false;
try{
var=wroxWin=window.open("http://www.wrox.com","_blank");
if(wroxWin==null){
blocked=true;
}
}catch(ex){
blocked=true;
}
if(blocked){
alert("the popup was blocked");
}
1.6間歇呼叫和超時呼叫
JavaScript是單執行緒語言,一定時間內只能執行一段程式碼,因此有一個JavaScript任務佇列,這些任務會按照它們新增到佇列的順序執行。
js允許設定超時值和間歇時間值來排程程式碼在特定的時刻執行:
1)在指定的時間過後執行程式碼;
2)每個指定時間執行一次程式碼;
1)超時呼叫的方法:
setTimeout(a,b);
a 指的是一個包含js程式碼的字串 或者 一個函式 (不建議是字串,因為可能導致效能損失)
b 指的是等待的時間,單位是毫秒,告訴javascript在過多長時間把當前任務新增到佇列中,如果佇列是空,新增的程式碼立即執行,否則要等前面的程式碼執行完以後再執行,也就是說經過該時間後指定的程式碼不一定會執行;
該方法會返回一個數值ID,表示超時呼叫,可以通過它來取消超時呼叫;
要取消未執行的超時呼叫計劃,可以呼叫clearTimeout(),將setTimeout返回的數值ID作為引數,舉例如下:
//設定超時呼叫
var timeoutId=setTimeout(function(){
alert("hello world");
},1000);
//取消超時呼叫
clearTimeout(timeoutId);
2)間歇呼叫的方法:
按照指定的時間間隔重複執行程式碼,直到間歇呼叫被取消或者頁面解除安裝;
setInterval(a,b)
a 指的是一個包含js程式碼的字串 或者 一個函式 (不建議是字串,因為可能導致效能損失)
b 指的是每次執行之前需要等待的毫秒數;每隔一個時間開始執行時,前一個程式碼有可能還沒執行完
該方法返回一個間歇呼叫ID,通過clearInterval(間歇ID),可以取消未執行的間歇呼叫;
取消間歇呼叫是很重要的,否則間歇呼叫將會一直執行到頁面解除安裝
var num=0;
var max=10;
var intervalId=null;
function incrementNumber(){
num++;
//如果執行次數達到了max設定的值,則取消後續未執行的呼叫
if(num==max){
clearInterval(intervalId);
alert("done");
}
}
intervalId=setInterval(incrementNumber,500);
以上程式碼如果用超時呼叫也可以實現:
var num=0;
var max=10;
function incrementNumber(){
num++;
if(num<=max){
setTimeout(argument.callee,500);
}else{
alert("done");
}
}
在超時呼叫的時候沒有必要跟蹤超時呼叫的ID,因為每次執行完程式碼之後,如果不在設定另一次超時呼叫,呼叫就會自行停止。
一般認為,使用超時呼叫來模擬間歇呼叫的一種最佳模式,能不用最好不用
在開發環境下,很少使用真正的間歇呼叫,原因是後一個間歇呼叫可能會在前一個間歇呼叫結束之前啟動;
1.7系統對話方塊
系統對話方塊與瀏覽器中顯示的網頁沒有關係,也不包含HTML。他們的外觀由作業系統及瀏覽器設定決定,而不是css決定;
在顯示對話方塊的時候頁面中的程式碼會停止執行,而關掉這些對話方塊後代碼繼續執行;
呼叫對話方塊的方法有:alert(),confirm(),prompt()
//警告框
alert("警告框");
//“確認”對話方塊,可以讓使用者決定是否執行給定操作
if(confirm("are you sure?")){
alert("sure");
}else{
alert("cancel");
}
//“提示”對話方塊
var res=prompt("what is your name","");
if(res!=null){
alert("welcome,"+res);
}
2.location物件
1)Location物件提供了與當前視窗中載入的文件有關的資訊和一些導航功能;
2)它既是window物件的屬性,也是document物件的屬性。即,window.location和document.location引用的是同一個物件
3)用處: 儲存著當前文件的資訊;
將URL解析為獨立的片段;
4)location物件的屬性:(這些屬性操作都會在瀏覽器的歷史記錄中生成一條記錄)
5)改變瀏覽器位置的方法:
location.assign("http://www.wrox.com");
window.location("http://www.wrox.com");
location.href("http://www.wrox.com"); //最常用
6)設定新值改變URL
每次修改location的屬性(hash除外),頁面都會以新URL重新載入
//假設初始URL為http://www.wrox.com/WileyCDA/
//修改為http://www.wrox.com/WileyCDA/#section
location.hash="#section";
//修改為http://www.wrox.com/WileyCDA/?q=javascript
location.search="?q=javascript";
7)replace()可以禁用瀏覽器的“後退”行為,這個方法接收一個URL導航到一個地址,使得瀏覽器的位置改變,但不會再歷史記錄中生成新的記錄;
location.replace("http://www.wrox.com");
8) 重新載入當前頁面:reload()方法
reload()呼叫之後的程式碼可能會也可能不會執行,最好將reload()放在程式碼的最後一行;
location.reload(); //重新載入(有可能從快取中載入)
location.reload(true); //重新載入(從伺服器重新載入)
3.history物件
history儲存著使用者上網的歷史記錄
每個瀏覽器視窗、每個標籤頁、每個框架,都有自己的history物件與特定的window物件關聯
1)使用go()方法可以在使用者的歷史記錄中任意跳轉,可以向後也可以向前
//後退一頁
history.go(-1);
//前進一頁
history.go(1);
//前進兩頁
history.go(2);
//跳轉到最近的wrox com頁面,是歷史記錄中包含該字串的第一個位置,可能後退也可能前進,要看哪個最近
history.go("wrox.com");
2)back() 模仿瀏覽器“後退”
forward() 模仿瀏覽器“前進”
//後退一頁
history.back();
//前進一頁
history.forward();
3)length屬性,儲存著歷史記錄的數量
history.length;