JavaScript Window---瀏覽器物件模型

忘塵天外天發表於2017-09-10
JavaScript瀏覽器物件模型

　　瀏覽器物件模型(BOM)使JavaScript有能力與瀏覽器"對話"。瀏覽器物件模型(Browser  Object  Model，BOM)尚無正式標準.因為現代瀏覽器(幾乎)實現了JavaScript互動性方面的相同方法和屬性,因此常被認為是BOM的方法和屬性。

　　Window物件

　　所有瀏覽器都支援window物件。它表示瀏覽器視窗。所有JavaScript全域性物件、函式以及變數均自動成為window物件的成員。全域性變數是window物件的屬性。全域性函式是window物件的方法。甚至HTML DOM的document也是window物件的屬性之一。

    window.document.getElementById("header");

 與下面效果相同：

    document.getElementById("header") ;

 Window尺寸

　　對於不同版本的瀏覽器，有不同的方法去確定瀏覽器視窗的尺寸。

對於Chrome、Firefox、Opera以及Safari：

  • window.innerHeight - 瀏覽器視窗的內部高度（包括滾動條）
  • window.innerWidth - 瀏覽器視窗的內部寬度（包括滾動條）

對於IE8、7、6、5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

涵蓋所有瀏覽器的JavaScript方案：

var   w=window.innerWidth
    ||  document.documentElement.clientWidth
    ||  document.body.clientWidth ;

var   h=window.innerHeight
    ||  document.documentElement.clientHeight
    ||  document.body.clientHeight  ;

 Window物件的其它方法：

  • window.open() -  開啟新視窗
  • window.close() - 關閉當前視窗
  • window.moveTo() - 移動當前視窗
  • window.resizeTo() - 調整當前視窗的尺寸。

JavaScript  Window Screen

　　window screen 物件包含使用者螢幕的資訊。window screen物件在使用時可以不帶window這個字首。常用屬性：screen.availWidth - 可用的螢幕寬度；screen.availHeight  -  可用的螢幕高度

screen.availWidth屬性返回訪問者螢幕的寬度，以畫素計，減去介面特性，比如視窗工作列。

screen.availHeight屬性返回訪問者螢幕的高度，以畫素計，減去介面特性，比如視窗工作列

JavaScript  Window Location

window.location 物件用於獲得當前頁面的地址（URL），並把瀏覽器重新定向到效能的頁面。window.location物件在編寫時可以不使用window這個字首。

  • location.hostname  返回web諸暨的域名 
  • location.pathname  返回當前頁面的路徑名和檔名
  • location.port　       返回web諸暨的埠（80或443）　
  • location.protocol    返回所使用的web協議（http://或https://）

Window  Location  Href

location.href  返回當前頁面的（完整）URL

Window  Location  Pathname

location.pathname屬性返回URL的路徑名

Window  Location  Assign

location.assign()方法載入新的文件。語法：window.location.assign("http://www.w3cschool.cc") ;

JavaScript  Window History

　　window.history 物件包含瀏覽器的歷史。window.history在編寫時可不使用window這個字首。為了保護使用者的隱私，對JavaScript訪問該物件的方法做出了限制。常用方法：

  • history.back() -與在瀏覽器點選後退按鈕相同，載入歷史列表中的前一個URL
  • history.forward()  - 與在瀏覽器點選向前按鈕相同，載入歷史列表中的下一個URL

JavaScript  Window Navigaror

　　window.navigator物件包含有關訪問者瀏覽器的資訊。window.navigator物件在編寫時可不使用window這個字首。常用的屬性：

  • navigator.appCodeName  - 瀏覽器代號
  • navigator.appName           -  瀏覽器名稱
  • navigtor.appVersion          - 瀏覽器版本
  • navigator.cookieEnabled   - 啟用cookie
  • navigtor.platform　　        -  硬體平臺
  • navigator.userAgent         -  使用者代理
  • navigator.systemLanguage  -  使用者代理語言

注意：來自navigator 物件的資訊具有誤導性，不應該被用於檢測瀏覽器版本，因為：

  • navigator資料可被瀏覽器使用者更改
  • 一些瀏覽器對測試站點會識別錯誤
  • 瀏覽器無法報告晚於瀏覽器釋出的新作業系統

瀏覽器檢測

由於navigator可誤導瀏覽器檢測，使用物件檢測可用來嗅探不同的瀏覽器。由於不同的瀏覽器支援不同的物件，可以使用物件裡檢測瀏覽器。例如：只有Opera支援屬性“window.opera”。可以據此識別出Opera。例子：if（window.opera）{...action...}

JavaScript 彈窗

可以在JavaScript中建立三種訊息框：警告框、確認框、提示框。

警告框（alert()）：常用於確保使用者可以得到某些訊息。當警告框出現後，使用者需要點選確定按鈕後才能繼續操作。語法：window.alert("text") ;     這個方法可以不帶上window字首，直接使用alert()方法。

確認框（confirm()）：確認框常用於驗證是否接受使用者操作。當確認框彈出時，使用者可以點選“確認” 或者 “取消”來確定使用者操作。當點選“確認”，確認框返回true，如果點選“取消”，確認框返回false。語法：window.confirm()方法可以不帶上window物件，直接使用confirm()方法。

提示框（prompt()）：提示框經常用於提示使用者在進入頁面前輸入某個值。當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操作。如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為null。

　　語法：window.prompt("text","defaultvalue") ;   這個方法可以不帶上window字首，直接使用prompt()方法。

          var  person = prompt("請輸入你的名字");
          if(person!=null$$person.trim().length()>0){
          var  x = "你好" + person + "!今天感覺如何？" ;
          document.getElementById("demo").innerHTML = x ;
}

 換行

彈窗使用反斜槓+n （\n）來設定換行。

        alert("Hello \nHow  are you?")

 

相關文章