JS知識整理隨筆（8） BOM

標籤：alt   表達   ref   bsp   延遲   參數說明   path   緩衝   技術分享   

 BOM(browser object model) 瀏覽器物件模型

BOM 對象

• window
• navigator
• screen
• history
• location
• document
• event

 

 window

window是瀏覽器的一個執行個體，在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪問瀏覽器的視窗的一個借口，又是ECMAScript規定Global(全域)對象

 

window.alert("content")  顯示帶有一段訊息和一個確認按鈕的警告框

window.confirm("message") 顯示一個帶有指定訊息和ok及取消按鈕的對話方塊

傳回值(Boolean)

如果使用者點擊確定按鈕，則confirm() 返回true

如果使用者點擊取消按鈕，則confirm()返回false

   var result=window.confirm("hello world");      if(result){          alert("你點擊了確定")      }else{          alert("你點擊了取消")      }

 

 

window.prompt("text,defaultText")

參數說明

text:要在對話方塊中顯示的純文字（而不是HTML格式的文本）

defaultText：預設的輸入文本

傳回值：

如果使用者點擊提示框的取消按鈕，則返回null

如果使用者點擊確認按鈕，則返回輸入欄位當前顯示的文本

      var message=prompt("請輸入序號","001")      console.log(message);

 

window.open(pageURL,name,parameters)

功能：開啟一個新的瀏覽器視窗或尋找一個已命名的視窗

參數說明

pageURL:子視窗路徑

name：子視窗控制代碼（name神明了新視窗的名稱，方便後期通過name對子視窗進行引用）

parameters：視窗參數（用逗號隔開）

 

window.close(); 關閉視窗

逾時調用

setTimeout(code,millisec)

功能：在指定的毫秒數後調用函數或計算運算式

參數說明

code：要調用的函數或要執行的JavaScript代碼串

millisec:在執行代碼前需要等待的毫秒數

說明

setTimeout()只執行code一次。如果多次調用，可以讓code自身再次調用serTineout()

      var fnCall=function(){            alert(‘world‘);        }        setTimeout(function(){          alert(‘hello‘);        },1000)              setTimeout(fnCall,2000);

 

setTimeout方法返回一個ID值，通過它取消逾時調用

清除逾時調用

clearTimeout(id_of_settimeout)

功能：取消setTimeout()方法設定timeout

參數說明

id_of_settimeout:由setTimeout()返回的ID值，該值標識要取消的順延強制代碼塊

 var timeout=setTimeout(function(){          alert(‘hello‘);        },1000)        
 clearTimeout(timeout);

 

間歇調用

setInterval(code,millisec)

功能：每隔指定的時間執行一次代碼

參數說明

code：要調用的函數或要執行的JavaScript代碼串

millisec:周期性執行或調用code之間的時間間隔 以毫秒計

 

 

清除間歇調用

clearInterval(id_of_setinterval)

取消setInterval()方法設定的interval

參數說明

id_of_setinterval：由setInterval()返回的ID值

   var interval=setInterval(function(){       console.log("hello");       },1000)        //10秒之後停止調用        setTimeout(function(){        clearInterval(interval);        },10000)

 

 

 

location

location對象提供了與當前視窗中載入文檔有關的資訊，還提供了一些導航功能，它既是window對象的屬性，也是document對象的屬性。

 

location.href

功能：返回當前載入頁面完整的URL

說明：location.href與window.location.href等價

 

location.hash

功能：返回URL中的hash（#號後跟零或多個字元），如果不包含則返回Null 字元串

 

location.host

返回伺服器名稱和連接埠號碼（如果有）

location.hosname

返回不帶連接埠號碼的伺服器名稱

location.pathname

返回URL中的目錄和檔案名稱

 

location改變瀏覽器位置

location.href屬性

 

location對象其它屬性也可以改變URL

location.hash

location.search

 

location..replace()

重新定向URL

使用location.replace不會再記錄中產生新記錄

location.reload()

重新載入當前顯示的頁面

說明：

location.reload()有可能從緩衝在載入

location(true)從伺服器重新載入

 

history

儲存使用者在瀏覽器中訪問頁面的記錄

 

history.back()

回到記錄的上一步

相當於使用了history.go(-1)

 

history.forward()

回到記錄的下一步

相當於使用了history.go(1)

 

screen

包含有關用戶端顯示螢幕的資訊

screen.availWidth

返回可用的螢幕寬度

 

screen.availHeight

返回可用的螢幕高度

 

Navigator

Navigtor對象的userAgent屬性可以判斷

• 瀏覽器類型
• 裝置終端是移動還是PC

 

userAgent：用來識別瀏覽器名稱、版本、引擎以及作業系統等資訊內容

 

JS知識整理隨筆（8） BOM