1. 程式人生 > >BOM(瀏覽器物件模型)的一些操作

BOM(瀏覽器物件模型)的一些操作

一個完整的JavaScript實現由三部分組成:

  • ECMAScript:核心,定義語言基礎,規定了語言的組成部分(語法,型別,關鍵字,保留字,物件等)
  • DOM:文件物件模型,·DOM把整個頁面對映成一個多層節點結構(樹形),從而我們可以自如的刪除、新增、替換或修改任何節點
  • BOM:瀏覽器物件模型,支援訪問和操作瀏覽器視窗,使用BOM可以控制瀏覽器顯示的頁面以外的部分。

BOM提供了很多物件,用於訪問瀏覽器的功能,以下逐一介紹:

1、window物件

window物件是BOM的核心物件,在瀏覽器中window物件有兩個作用:①充當全域性作用域②表示瀏覽器視窗

①充當全域性作用域

所有在全域性作用域中宣告的變數、函式都會變成window物件的屬性和方法

var a =1;
alert(window.a);//1
function fun(){
 alert(this.a);
}
window.fun();//1

②表示瀏覽器視窗

  • 視窗位置 screenLeft、screenTop(Firefox不支援這兩個屬性)分別表示視窗相對於螢幕左邊和上邊的位置;
    在Firefox瀏覽器中用screenX、screenY來提供相應的視窗位置資訊;以上的屬性都無法保證在跨瀏覽器的條件下取得視窗左邊和上邊的精確座標值。
    window.moveTo(新位置的X的座標新位置的Y的座標
    )、window.moveBy(水平方向上移動的畫素數,垂直方向上移動的畫素數) 方法可以將視窗精確地移動到一個新的位置。
    這兩個方法不適用與框架,只對外層的window物件使用,且在Opera和IE7+中預設是禁用的
  • 視窗大小 outWidth,outHeight;innerWidth、innerHeight  在各個瀏覽器中所表示的大小含義有所不同
  • 開啟視窗 window.open() 既可以開啟一個新的瀏覽器視窗也可以導航到一個特定的URL
    語法:window.open(URL,name,features,replace)
    • URL:要載入的URL;
    • name:可選,視窗的目標 可以是視窗或框架的名字,如果有具有該名字的視窗或框架中,就會在其中載入第一個引數指定的URL,否則就會建立一個新的視窗併為其命名為name
      ;也可以是_self,_parent,_top或者_blank;
    • features 可選,由逗號分隔的設定字串,表示在新視窗中都顯示哪些特性,如:height、left、resizable、status等。在不開啟新視窗的情況下會忽略該引數,如果忽略,開啟新視窗時採用預設設定;
    • replace 可選,一個布林值,表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面,該引數只有在不開啟新視窗的情況下使用。
  • 視窗關係及框架 如果頁面中包含框架,則每個框架都擁有自己的window物件,並且儲存在frames集合中。在frames集合中可以通過陣列索引或者框架名稱來訪問相應的window物件  如:window.frames[0]
  • 顯示”列印“對話方塊  window.print();

 

2、location物件:表示當前頁面的URL資訊

location物件提供了與當前視窗中載入的文件的URL有關的資訊;通過訪問location的不同的屬性可以訪問url中不同的片段資訊

  • href 返回當前載入頁面的完整URL
  • host 返回伺服器名稱和埠號(如果有)
  • hostname 返回不帶埠號的伺服器名稱
  • hash 返回URL中的hash(#後面的零或多個字元)
  • port 返回URL中指定的埠號。如果URL中不包括埠號則這個屬性返回空字串
  • protocol 返回頁面使用的協議。通常是http:或https:
  • pathname 返回URL中的目錄和檔名
  • search 返回URL的查詢字串。這個字串以問號開頭

3、navigator物件:提供了與瀏覽器有關的資訊

navigator物件的屬性通常用於監測顯示網頁的瀏覽器的型別。每個瀏覽器中的Navigator物件都有一套自己的屬性,以下列出部分屬性:

//每個屬性的值根據所用的瀏覽器的不同而不同
 //appName 完整的瀏覽器名稱
 document.write(navigator.appName+"<br/>");//Netscape
 
 //language 瀏覽器的主語言
 document.write(navigator.language+"<br/>");//zh-CN
 
 //onLine 表示是否連線到了因特網
 document.write(navigator.onLine+"<br/>");//true
 
 //platform 瀏覽器所在的系統平臺
 document.write(navigator.platform+"<br/>");//Win64
 
 //userAgent 瀏覽器的使用者代理字串
 document.write(navigator.userAgent+"<br/>");//Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

4、screen物件:儲存著與客戶端顯示器(螢幕)有關的資訊

screen物件用處不大,基本上只用來表示客戶端的能力,其中包括瀏覽器視窗外部的顯示器的資訊,如畫素寬度和高度等。以下列出部分屬性:

 1 //每個屬性的值根據所用的裝置不同而不同
 2 //availHeight 螢幕的畫素高度減系統部件高度之後的值
 3 document.write(screen.availHeight);//1040
 4 
 5 //height螢幕的畫素高度
 6 document.write(screen.height);//1080
 7 
 8 //availWidth螢幕的畫素寬度減系統部件寬度之後的值
 9 document.write(screen.availWidth);//1920
10 
11 //width螢幕的畫素寬度
12 document.write(screen.width);//1920
13 
14 //colorDepth用於表示顏色的位數
15 document.write(screen.colorDepth);//24

5、history物件:儲存著使用者上網的歷史記錄

go()方法可以在使用者的歷史記錄中任意跳轉
  history.go(-1);//後退一頁
  history.go(1);//前進一頁
  history.go(2);//前進兩頁

back()方法模擬瀏覽器的“後退”按鈕

  history.back();//後退一頁

forward()方法模擬瀏覽器的“前進”按鈕

  history.forward();//前進一頁

history也不常用,在建立自定義的“後退”和“前進”按鈕時經常使用到。

history還有個length屬性,儲存著歷史記錄的數量。當頁面的URL改變時,就會生成一條歷史記錄。


更多專業前端知識,請上 【猿204