15.BOM

BOM
學習要點：
1.window對象
2.location對象
3.history對象

BOM也叫瀏覽器對象模型，它提供了不少對象，用於訪問瀏覽器的功能。BOM缺乏規範，每一個瀏覽器提供商有按
照本身想法擴展它，那麼瀏覽器共有對象就成了事實的標準，因此，BOM自己是沒有標準的或者尚未哪一個組織
去標準它。

1、window對象
BOM的核心對象是window，它表示瀏覽器的一個實例。window對象處於Javascript結構的最頂層，對於每一個打開
的窗口，系統都會自動爲其定義window對象。
window
|
|—————|——————|——————|——————|——————|
document frames history location navigator screen
|
|—————|——————|——————|——————|
anchors forms images links location

從中能夠了解到window對象是最頂層的對象，window對象有六大屬性，這六大屬性自己也是對象，window對象
旗下的document屬性，也是對象，而且document對象旗下有五大屬性，這五大屬性又是對象。
總結：都是對象。

1.對象的屬性和方法

window對象有一系列的屬性，這些屬性自己也是對象。

window對象的屬性
屬性 含義
closed 當窗口關閉時爲真
defaultStatus 窗口底部狀態欄顯示的默認狀態消息
document 窗口中當前顯示的文檔對象
frames 窗口中的框架對象數組
history 保存有窗口最近加載的URL
length 窗口中的框架數
location 當前窗口的URL
name 窗口名
offscreenBuffering 用於繪製新窗口內容並在完成後複製已存在的內容，控制屏幕更新
opener 打開當前窗口的窗口
parent 指向包含另外一個窗口的窗口（由框架使用）
screen 顯示屏幕相關信息，如高度、寬度（以像素爲單位）
self 指示當前窗口
status 描述由用戶交互致使的狀態欄的臨時消息
top 包含特定窗口的最頂層窗口（由框架使用）
window 指示當前窗口，於self等效

window對象的方法
方法 功能
alert(text) 建立一個警告對話框，顯示一條消息
blur() 將焦點從窗口移除
clearInterval(interval) 清除以前設置的定時器間隔
clearTimeOut(timer) 清除以前設置的超時
close() 關閉窗口
confirm() 建立一個須要用戶確認的對話框
focus() 將焦點移致窗口
open(url,name,[options]) 打開一個新窗口並返回新window對象
prompt(text,defaultInput) 建立一個對話框要求用戶輸入信息
scroll(x,y) 在窗口中滾動到一個像素點的位置
setInterval(expression,milliseconds) 通過指定時間間隔計算一個表達式
setInterval(function,milliseconds,[arguments]) 通過指定時間間隔後調用一個函數
setTimeout(expression,milliseconds) 在定時器超事後計算一個表達式
setTimeout(function,milliseconds,[arguments]) 在定時器超過期後計算一個函數
print() 調出打印對話框
find() 調出查找對話框

window下的屬性和方法，可使用window屬性，window方法()或者直接屬性、方法()的方式調用。例如：
window alert()和alert()是一個意思。若是是某個瀏覽器獨有的屬性或者方法，那麼在其餘瀏覽器可能會不識別，
看成普通變量或者普通函數。

2.系統對話框
瀏覽器經過alert()、confirm()和prompt()方法能夠調用系統對話框向用戶顯示信息。系統對話框與瀏覽器中顯示
的網頁沒有關係，也不包含HTML。

//彈出警告
alert('Lee'); //直接彈出警告
window.alert('Lee'); //強制性

//肯定和取消
confirm('請肯定或者取消'); //這裏按哪一個都無效，這裏有肯定和取消按鈕
if(confirm('請肯定或者取消')){ //confirm自己有返回值，返回的一個布爾值
alert('您按了肯定！'); //按肯定返回true
}else{
alert('您按了取消！'); //按取消返回false
}

//輸入提示框
var num = prompt('請輸入一個數字',0);//兩個參數，一個提示，一個值

//調出打印及查找對話框
print(); //打印
find(); //查找

defaultStatus = '狀態欄默認文本'; //瀏覽器底部狀態欄初始默認值
status = '狀態欄文本'; //瀏覽器底部狀態欄設置值

defaultStatus = 'Lee'; //默認初始值
function a(){
status = 'journey'; //臨時設置值
}

3.新建窗口
使用window.open()方法能夠導航到一個特殊的URL，也能夠打開一個新的瀏覽器窗口。它能夠接受四個參數；
1.要加載的URL；2.窗口的名稱或者窗口的目標；3.一個特性字符串；4.一個表示新頁面是否取代瀏覽器記錄中
當前加載頁面的布爾值。
open('http://www.baidu.com'); //新建頁面打開百度
open('http://www.baidu.com' , 'baidu');//新建網頁並命名窗口並打開百度
open('http://www.baidu.com' , '_parent');//在本窗口打開百度_blank是新建

PS：不命名每次打開新窗口，命名的第一次打開新窗口，以後在這個窗口中加載。窗口目標是提供頁面的打開的
方式。好比本頁面，仍是新建。

第三字符串數
設置 值 說明
width 數值 新窗口的寬度，不能小於100
height 數值 新窗口的高度，不能小於100
top 數值 新窗口的Y座標，不能是負值
left 數值 新窗口的X座標，不能是負值
location yes or no 是否在瀏覽器窗口中顯示地址欄，不一樣瀏覽器默認值不一樣
menubar yes or no 是否在瀏覽器窗口顯示菜單欄，默認爲no
resizable yes or no 是否能夠經過拖動瀏覽器窗口的邊框改變大小，默認爲no
scrollbars yes or no 若是內容在頁面中顯示不下，是否容許滾動，默認爲no
status yes or no 是否在瀏覽器窗口中顯示狀態欄，默認爲no
toolbarv yes or no 是否在瀏覽器窗口中顯示工具欄，默認爲no
fullscreen yes or no 瀏覽器窗口是否最大化，僅限IE

//第三參數字符串
open('http://www.baidu.com', 'biadu' , 'width= 400 , height = 400 , top = 200, left = 200, toolbar = yes');

//open自己返回window對象
var box = open();
box.alert(""); //能夠指定彈出的窗口執行alert();

//子窗口操做父窗口
document.onclick = function(){
opener.document.write('子窗口讓我輸出的！');
}

3.窗口的位置和大小
用來肯定和修改window對象位置的屬性和方法有不少。IE、Safari、Opera和Chrome都是提供了screenLeft和
screenTop屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置，Firefox則在screenX和screenY屬性中提供
相同的窗口位置信息，Safari和Chrome也同時支持這兩個屬性。

//肯定窗口的位置IE支持
alert(screenLeft); //IE支持
alert(typeof screenLeft); //IE顯示number，不支持的顯示undefined

//肯定窗口的位置Firefox支持
alert(screenX); //Firefox支持
alert(typeof screenX); //Firefox顯示uumber，不支持的同上

PS：screenX屬性IE瀏覽器不認識，直接alert(screenX),screenX會看成一個爲聲明的變量，致使不執行。那麼
必須將它致爲window屬性才能顯示爲初始化變量應有的值，因此應該寫成：alert(window screenX).

//跨瀏覽器的方法
var leftX = (typeof screenLeft == 'number')?screenLeft:screenX;
var topY = (typeof screenTop == 'number')?screenTop:screenY;

窗口頁面大小，Firefox、Safari、Opera和Chrome均爲此提供了4個屬性：innerWidth和innerHeight，返回瀏
覽器窗口自己的尺寸：outerWidth和outerHeight，返回瀏覽器窗口自己及邊框的尺寸。

alert(innerWidth); //頁面長度
alert(innerHeight); //頁面高度
alert(outWidth); //頁面長度+邊框
alert(outHeight); //頁面高度+邊框

PS：在Chrome中，innerWidth=outWidth、innerHeight=outHeight；
PS：IE沒有提供當前瀏覽器窗口尺寸的屬性；不過，在後面的DOM課程中有提供相關的方法。

在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.
clientHeight中保存了頁面窗口的信息。

//若是是Firefox瀏覽器，直接使用innerWidth和innerHeight
var width = window.innerWidth; //這裏要加window，由於IE會無效
var height = window.innerHeight;

if(typeof width !='number'){
if(document.compatMode == 'CSS1Compat'){ //若是使用IE，就使用document
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}else{
width = document.body.clientWidth; //非標準模式使用body
height = document.body.clientHeight;
}
}

PS：以上方法能夠經過不一樣瀏覽器取得各自的瀏覽器窗口頁面可視部分的大小。
document.compatMode能夠肯定頁面是否處於非標準模式，若是返回CSS1Compat即標準模式。

//調整瀏覽器位置
moveTo(0,0); //IE有效，移動到0,0座標
moveBy(10,10); //IE有效，向下和右分別移動10像素

//調整瀏覽器大小
resizeTo(200,200); //IE有效，調整大小
resizeBy(200,200); //IE有效，擴展收縮大小

PS：因爲此類方法被瀏覽器禁用較多，用處不大。

4.間歇調用和超時調用
Javascript是單線程語言，但它容許經過設置超時值和間歇時間值來調度代碼在特定的時間執行。前者在指定的
時間事後執行代碼，然後者則是每隔指定的時間就執行一次代碼。
超時調用須要使用window對象的setTimeout()方法。它接受兩個參數；要執行的代碼和毫秒數的超時時間。

setTimeout("alert('journey')" , 1000); //不建議直接使用字符串，一秒後執行第一個參數的代碼塊

function box(){
alert('journey');
}
setTimeout(box , 1000); //直接傳入函數名便可

setTimeout(function(){ //推薦作法，擴展性好封裝性好
alert('journey');
} , 1000);

PS：直接使用函數傳入的方法，擴展性好，性能更佳。

調用setTimeout()以後，該方法會返回一個數值ID，表示超時調用，這個超時調用的ID是計劃執行代碼的唯一標
識符，能夠經過它來取消超時調用。

要取消還沒有執行的超時調用計劃，能夠調用clearTimeout()方法並將相應的超時調用ID

var box = setTimeout(function(){
alert('journey');
},2000);

clearTimeOut(box); //把ID傳入，取消當前超時調用

間歇調用於超時調用相似，只不過它按照指定的時間間隔重複執行代碼，直至間歇調用被取消或者頁面被卸載。
設置間歇調用的方法是setInterval(),它接受的參數於setTimeout()相同：要執行的代碼和每次執行以前須要等待
的毫秒數。
var box = setInterval(function(){
alert('journey');
}, 2000); //每2000毫秒執行一次函數

clearInterval(box); //取消間歇調用

但上面的代碼是沒有意義的，咱們須要一個能設置5秒的定時器，須要以下代碼：
var num = 0; //設置起始秒
var max = 5; //設置最終秒
setInterval(function(){ //間歇調用
num++; //遞增num
if(num == max){ //若是獲得5秒
clearInterval(this); //取消間歇調用，this表示方法自己，this自己不能表明ID
alert('5秒後彈窗！');
}
}, 1000); //1秒

 

通常認爲，使用超時調用來模擬間歇調用是一種最佳模式，在開發環境中，不多使用真正的間歇調用，由於須要
根據狀況來取消ID，而且可能形成同步的一些問題，咱們建議不要使用間歇調用，而去使用超時調用。

var num = 0;
var max = 5;
function box(){
num++;
if(num==max){
alert('5秒後彈窗！');
}else{
setTimeout(box,1000);
}
}
setTimeout(box,1000); //執行定時器

PS：在使用超時調用時，沒有要跟蹤超時調用ID，由於每次執行代碼以後，若是再也不設置另外一次超時調用，調用就會自動中止。

2、location對象
location是BOM對象之一，它提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。事實上，
location對象的屬性，也是document對象的屬性；因此window.location和document.location等效。

alert(location); //獲取當前的URL

location對象的屬性
屬性 描述的URL內容
hash 若是該部分存在，表示錯點部分
host 主機名；端口號
hostname 主機名
href 這個url
pathname 路徑名
port 端口號
protocal 協議部分
search 查詢字符串

location對象的方法
方法 功能
assign() 跳轉到指定頁面，與href等效
reload() 重載當前URL
replace() 用新的URL轉換當前頁面

 

 

location.hash = '#1'; //設置#後的字符串，並跳轉，就是包含#1的URL
alert(location.hash); //獲取#後的字符串

location.port = 8888; //設置端口號，並跳轉
alert(location.port); //獲取當前的端口號

location.hostname = 'journey'; //設置主機名，並跳轉
alert(location.hostname); //獲取當前的主機名

location.pathname = 'journey'; //設置當前的路徑，並跳轉
alert(location.pathname); //獲取當前的路徑

location.protocal = 'ftp'; //設置協議，並跳轉
alert(location.protocal); //獲取當前協議

location.search = '?id=5'; //設置？後面的字符串，並跳轉，死循環
alert(location.search); //獲取？後面的字符串

location.href = 'http://www.baidu.com'; //設置跳轉的URL，並跳轉
alert(location.href); //獲取當前的URL

在Web開發中，咱們常常須要獲取諸如?id=5&search=ok這種類型的URL的建值對，那麼經過location，咱們能夠
寫一個函數，來一一獲取。

function getArgs(){
//建立一個存放建值對的數組
var args=[];
//去除？號
var qs = location.search>0?location.search.substring(1):'';
//按&字符串分數組
var items = qs.split('&');
var item = null,name = null,value = null;
//遍歷
for(var i = 0 ; i < items.length ; i++){
item = item[i].split('=');
name = item[0];
value = item[1];
//把鍵值對存放到數值中去
args[name] = value;
}
return args;
}

var args = getArgs();
alert(args['id']);
alert(args['search']);

location.assign('http://www.baidu.com'); //跳轉到指定的URL
location.reload(); //最有效的從新加載，有可能從緩存中加載
location.reload(true); //強制加載，從服務器源頭從新加載
location.replace('http://www.baidu.com'); //能夠避免產生跳轉前的歷史記錄

 

3、history對象

history對象是window對象的屬性，它保存着用戶上網的記錄，從窗口被打開的那一刻算起。

history對象的屬性

屬性 描述URL中的哪部分
length history對象中的記錄數

history對象的方法

方法 功能
back() 前往瀏覽器歷史條目前一個URL，相似後退
forvard() 前往瀏覽器歷史條目下一個URL，相似前進
go(num) 瀏覽器在history對象中向前或向後

 

function back(){ //跳轉到前一個URL
history.back();
}

alert(history.length); //歷史記錄的總數

function forvard(){
history.forvard();
}

function go(num){ history.go(num);}