DIV CSS 佈局教程網

BOM也叫做浏覽器對象模型,它提供了很多對象,用於訪問浏覽器的功能;這些功能與任何網頁內容無關;
BOM缺少規范,每個浏覽器提供商都按照自己的想法去擴展它,那麼浏覽器共有對象就成了事實的標准;

一 window對象

// BOM的核心對象是window,它表示浏覽器的一個實例;
// window對象處於JavaScript結構的最頂層;
// 對於每個打開的窗口,系統都會自動為其定義window對象;
// window對象同時扮演著ECMAScript中Global對象的角色,因此所有在全局作用域中聲明的變量/函數都會變成window對象的屬性和方法;
// PS:嘗試訪問未聲明的變量會拋出錯誤,但是通過查詢window對象,可以知道某個可能未聲明的對象是否存在;
  var newValue = oldValue;        // =>ReferenceError:oldValue is not defined;
  var newValue = window.oldValue;     // =>undefined;

1.window對象的屬性和方法
window對象有一系列的屬性,這些屬性本身也是對象;

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

(2).方法
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,millisenconds,[arguments]) 經過指定時間間隔後調用一個函數;
setTimeout(expression,milliseconds) 　　　　　　　在定時器超過後計算一個表達式;
steTimeout(function,milliseconds,[arguments]) 在定時器超過後調用一個函數;
print() 調出打印對話框;
find() 調出查找對話框;
// window下的屬性和方法,可以使用window.屬性、window.方法()或者直接屬性、方法()的調用;
// window.alert(text)=alert(text);

2.系統對話框
浏覽器通過alert()/confirm()和prompt()方法調用系統對話框向用戶顯示信息;
系統對話框與浏覽器中顯示的網頁沒有關系,也不包含HTML;
它們的外觀由操作系統及(或)浏覽器設置決定,而不是由CSS決定;
這幾個方法打開的對話框都是同步和模態的;也就是說,顯示這些對話框的時候代碼會停止運行,而關掉這些對話框後代碼又會恢復執行;

// 彈出警告
  alert('警告');

// 確認和取消
  if(confirm('請確定或取消'){          // confirm()本身有返回值;
    alert('您選擇了確定');           // 按確定,返回true值;
  })else{
    alert('您選擇了取消');           // 按取消,返回false值;
  }

// 輸入提示框
  var num = prompt('請輸入一個數字',0);     // 第一個參數是文字提示;第二個參數是輸入框模式填充值;並返回輸入框中的值;
  alert(num);                 // 將prompt()方法返回的值賦給變量num;並彈出;

// 調用打印及查找對話框
  print();                   // 打印; 彈出浏覽器打印窗口;
  find();                   // =>boolean;頁面有匹配的查找內容返回true;相對於Ctrl+F;

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

3.新建窗口(open())

// 使用window.open()方法可以導航到一個特定的URL,也可以打開一個新的浏覽器窗口;
// 它接收四個參數:
// (1).要加載的URL;
// (2).窗口的名稱或窗口目標;
// (3).一個特定字符串;
// (4).一個表示新頁面是否取代浏覽器記錄中當前加載頁面的布爾值;
open('www.baidu.com'); // chrome-search://local-ntp/www.baidu.com;打開失敗;需要添加http://;
open('http://www.baidu.com'); // 新建頁面並跳轉到百度;
open('http://www.baidu.com','搜索引擎'); // 新建頁面 打開百度頁面 並命名窗口;並不會自動跳轉;並且再次調用時只是刷新那個頁面;
open('http://www.baidu.com','_parent'); // 在本頁面打開百度;'_blank'是指定新頁面打開;
// 第三個字符串參數
設置 值 說明
width 數值 新窗口的寬度,不小於100px;
height 數值 新窗口的高度,不小於100px;
top 數值 新窗口的Y坐標,不能是負值;
left 數值 新窗口的X坐標,不能是負值;
location boolean 是否在浏覽器窗口中顯示地址欄;不同浏覽器默認值不同;
menubar boolean 是否在浏覽器窗口顯示菜單欄,默認為no;
resizable boolean 是否通過拖動浏覽器窗口邊框來改變大小;默認no;
scrollbars boolean 如果頁面內容顯示不下,是否顯示滾動條;默認no;
status boolean 是否在浏覽器窗口中顯示狀態欄,默認no;
toolbar boolean 是否在浏覽器中顯示工具欄;默認no;
fullscreen boolean 浏覽器窗口是否最大化;僅IE支持;
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

// open()本身返回window對象
var box = open(); // 返回了一個window對象,打開了一個新空白頁面;
box.alert(''); // 然後指定在open()返回的對象打開的新頁面彈窗;

// 字窗口操作父窗口
document.onclick = function(){　　　　　　　　 // 在新的窗口中點擊docuement對象;
opener.document.write('子窗口讓我輸出的!');// 此時在產生它的父窗口會生成文字內容;
}

4.窗口的位置和大小

(1).窗口的位置
// 用來確定和修改window對象(浏覽器窗口)相對於屏幕的位置:
// IE+Safari+Opera+Chrome都提供了screenLeft和screenTop屬性,
// Firefox提供了screenX和screeY屬性;
// 他們分別表示窗口看相對於屏幕左邊和上邊的位置;
  
// 確定窗口的位置=>IE
  alert(screenLeft);              // 浏覽器左側離屏幕的距離;
// 確定窗口的位置=>Firefox
  alert(screenX);                // 浏覽器左側離屏幕的距離;

// 跨浏覽器的方法
  var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
  // 判斷檢測的screenLeft是否是數值,若是則使用screenLeft的值,否則使用screenX的值;

(2).窗口的大小
// 檢測浏覽器窗口本身及邊框的尺寸:outerWidth和outerHeight;
  alert(outerWidth);
  alert(outerHeight);
// 檢測頁面大小屬性:innerWidth和innerHeight;
  alert(innerWidth);
  alert(innerHeight);
// PS:IE沒有提供當前浏覽器窗口尺寸的屬性; 在DOM中有提供相關的方法;

// 在IE及其他浏覽器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;來保存頁面窗口的信息;
// PS:在IE6中,上述屬性在標准模式下才有效;如果是怪異模式,就必須通過document.body.clientWidth和document.body.clientHeight;
// 如果是Firefox等浏覽器,直接使用innerWidth和innerHeight;
  var width = window.innerWidth;        // 這裡要加window,因為IE會無效;
  var height = window.innerHeight;
  if(typeof width != 'number'){         // IE6浏覽器
    if(document.compatMode == 'CSS1Compat'){ // 判斷是IE6標准模式;使用documentElement;
      width = document.documentElement.clientWidth;
      height = document.documentElement.clientHeight;
    }else{                  // 否則是IE6非標准模式;使用body;
      width = document.body.clientWidth;
      height = document.body.clientHeight;
    }
  }
  // PS:以上方法可以通過不同浏覽器取得各自的浏覽器窗口可視部分的大小;
  // document.compatMode可以確定頁面是否處於標准模式;

// 調整浏覽器位置;
  moveTo(0,0);                 // 移動到(0,0)坐標;IE有效;
  moveBy(10,10);                // 向下和向右分別移動10px;IE有效;

// 調整浏覽器大小
  resizeTo(200,200);              // 調整大小;
  resizeBy(200,200);              // 擴展收縮大小;

5.間歇調用和超時調用
1 // JavaScript是單線程語言,但它允許通過設置超時值和間歇時間值來調度代碼在特定的時刻執行;
2 // 超時值:在指定的時間過後執行代碼;
3 // 間隔值:每隔指定的時間就執行一次代碼;

// 超時調用使用window對象的setTimeout()方法;
// 它接受兩個參數:要執行的代碼和毫秒數;
  setTimeout(function(){            // 直接使用函數傳入的方法,擴展性好,性能更加;
    alert('警告!');
  },1000);
// 調用setTimeout()之後,該方法會返回一個數值ID,表示超時調用;
// 這個超時調用的ID是計劃執行代碼的唯一標識符,可以通過它來取消超時調用;
// 要取消尚未執行的超時調用計劃,可以調用clearTimeout()方法並將相應的超時調用ID作為參數傳遞給它;
  var box = setTimeout(function(){       // 將超時調用的ID賦值給變量box;
    alert('超時調用');
  },1000);
  clearTimeout(box);              // 將ID傳入取消調用方法;

// 間歇調用使用window對象的setInterval()方法;
// 它會按照指定的時間間隔重復執行代碼,直至間歇調用被取消或頁面被卸載;
// 它接收的參數與setTimeout()相同;
  var pox = setInterval(function(){
    alert('間隔調用');
  },1000);
  clearInterval(pox);              // 取消間歇調用;

// 利用setInterval()設置一個5秒的定時器;
  var num = 0;                 // 設置起始秒;
  var max = 5;                 // 設置終止秒;
  setInterval(function(){
    num++;                  // 遞增num;
    if(num == max){              
      clearInterval(this);         // 取消間隔調用,this表示方法本身;一直跟蹤間隔調用的ID;
      alert('5秒後彈窗');
    }
  },1000);

// 一般使用超時調用來模擬間隔調用是一種最佳模式;
// 因為使用間隔調用需要根據情況來取消ID,並且可能造成同步的一些問題;後一個間歇調用可能會在前一個間歇調用結束之前啟動;
  var num = 0;
  var max = 5;
  function box(){
    num++;
    if(num == max){
      alert('5秒後彈窗');
    }else{
      setTimeout(box,1000);          // 隔1秒之後再次執行一個超時調用;
    }
  };
  setTimeout(box,1000);              // 執行定時器; 
  // PS:在使用超時調用時,沒必要跟蹤超時調用ID,因為每次執行之後,如果不再設置另一個超時調用,調用就會自動停止;

二 location對象

location是BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息,還提供了一些導航功能;
事實上,location對象是window對象的屬性,也是document對象的屬性;
alert(location); // 獲取當前的URL

(1).location對象的屬性
屬性 描述的URL內容
hash 如果該部分存在,表示錨點部分;
host 主機名:端口號;
hostname 主機名;
href 整個URL;
pathname 路徑名;
port 端口號;
protocol 協議部分;
search 返回URL的查詢字符串('?gws_rd=ssl#safe=strict&q=ab'),這個字符串以問號開頭;
(2).location對象的方法
assign() 跳轉到指定頁面,與href等效;
reload() 重載當前URL;
replace() 用新的URL替換當前頁面;

location.hash = '#1'; // 設置#後的字符串,並跳轉;
location.hostname = 'Jack'; // 設置主機名;
location.search = '?id=5'; // 設置?後的字符串;

// 在Web開發中,我們經常需要獲取諸如?id=5&search=ok這種類型的URL的鍵值對;
// 通過location,我們可以寫一個函數,來一一獲取;
  function getArgs(){
    // 創建一個存放鍵值對的數組;
    var args = [];
    // 去除?號;
    var qs = location.search.length>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 = items[i].split('=');
      name = decodeURIComponent(item[0]);  // 因為查詢字符串被浏覽器編碼過;
      value = decodeURIComponent(item[1]);// 每個查詢字符串參數都變成了args對象的屬性;
      // 把鍵值對存放到數組中;
      args[name] = value;
    }
    return args;
  }
  var args = getArgs();
  alert(args['id']);              // 獲取URL中id對應的值;

復制代碼 代碼如下:
location.assign('http://www.baidu.com');      // 跳轉到指定的URL;2
location.reload();                            // 最有效的重新加載,有可能從緩存加載;
location.reload(true);                        // 強制加載,從服務器源頭重新加載;5
locatioin.replace('http://www.baidu.com');    // 在本頁跳轉到百度頁面,並且可以避免產生跳轉的歷史記錄;

三 history對象

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

(1).history對象的屬性

length                 history對象中的記錄數;
(2).history對象的方法
back()                前往浏覽器歷史條目前一個URL,類似後退;
forward()             前往浏覽器歷史條目下一個URL,類似前進;
go(num)               浏覽器在history對象中向前或向後;

復制代碼 代碼如下:
    function back(){
        history.back();
    }
    function forward(){
        history.forward();
    }
    function go(num){
        history.go(num);
    }
// PS:可以通過判斷history.length == 0,得到是否有歷史記錄;

四 小結

 浏覽器對象模型(BOM)以window對象為依托,表示浏覽器窗口以及頁面可見區域;
 同時window對象還是ECMAScript中的Global對象,因而所有全局變量和函數都是它的屬性,且所有原生的構造函數及其他函數也都存在於它的命名空間下;
 (1).使用location對象可以通過編程方式來訪問浏覽器的導航系統;設置相應的屬性,可以逐段或整體性地修改浏覽器的URL;
 (2).調用replace()方法可以導航到一個新的URL,同時該URL會替換浏覽器歷史記錄中當前顯示的頁面;
 (3).screen對象:保存著與客戶端顯示器有關的信息,這些信息一般只用於站點分析;
 (4).history對象:為訪問浏覽器的歷史記錄開了一個小縫隙,開發人員可以據此判斷歷史記錄的數量,也可以在歷史記錄中向後或向前導航到任意頁面;