聊聊BOM的那些事

widuu 發布于2019-08-23 11:48 / 1971人閱讀

摘要：如果省略該參數，取默認值該方法的返回值是一個正整數，表示定時器的編號。

BOM

BOM的全稱是Browser Object Model，被譯為瀏覽器對象模型
BOM提供了獨立于HTML頁面內容，而與瀏覽器相關的一系列對象，主要被用于管理瀏覽器窗口及與瀏覽器窗口之間通信等功能
BOM由一系列對象構成，這些對象可以簡單理解為是由各個瀏覽器所提供的

Window對象

BOM中最核心的對象就是Window對象，該對象表示運行HTML頁面的瀏覽器窗口
在瀏覽器環境中，Window對象具有雙重角色，該對象既是允許JavaScript邏輯訪問瀏覽器窗口的一個對象，又是ECMAScript規范中的Global全局對象
在瀏覽器環境中運行JavaScript邏輯時，在全局作用域中定義的對象、變量和函數都是Window對象的屬性和方法
也可以通過Window對象訪問Global全局對象的屬性和方法。

全局作用域

在瀏覽器環境中，由于ECMAScript規范中Window對象代表了Global全局對象，因此所有定義在全局作用域中的變量和函數，都可以通過Window對象的屬性和方法方式訪問

var name="前端";
function fun(){
    console.log("this is function");
}
//window對象的屬性和方法方式訪問
console.log(window.name);
window.fun();

Window對象的屬性

Window對象的屬性數量較多，包含了瀏覽器窗口的基本信息、也包含了一些復雜的信息。可以人為將Window對象分為以下三類：
1.BOM中其他對象，例如Navigator對象等
2.一些有關瀏覽器窗口的基本信息等，這些屬性多屬于DOM 0級別，并不是W3C標準規范
3.包含了大量有關HTML5版本新增的功能等

瀏覽器窗口的寬度和高度

Window對象提供的屬性中可以獲取當前瀏覽器窗口的寬度和高度

innerWidth和innerHeight屬性：只讀屬性，返回當前瀏覽器窗口的可視寬度和高度，如果存在滾動條，也包含滾動條

outterWidth和outterHeight屬性：

Window對象與self屬性

Window對象的self屬性返回當前瀏覽器窗口的只讀屬性，self屬性返回的是Window對象的引用

console.log(window==window.self);

Window對象的方法

Window對象的方法

系統提示框：alert()方法、confirm()方法和prompt()方法

打開與關閉窗口：open()與close()方法、showModalDialog()

DOM規范標準0級別的一些方法

定時器：setTimeout()與clearTimeout()、setInterval()與clearInterval()

Navigator對象

Navigator對象包含了一些有關瀏覽器狀態的信息。可以通過window.navigator屬性得到Navigator對象
Navigator對象提供一系列常用屬性，獲取當前瀏覽器的信息

appCodeName：瀏覽器的代碼名

appName：瀏覽器的名稱

appVersion：瀏覽器的平臺和版本信息

platform：運行瀏覽器的操作系統平臺

userAgent屬性

Navigator對象的userAgent屬性返回由客戶機發送服務器的user-agent頭部的值，userAgent屬性是一個只讀的字符串，聲明了瀏覽器用于HTTP請求的用戶代理頭的值
通過userAgent屬性獲取用戶當前使用的瀏覽器產品，提供瀏覽器兼容解決方案
通過userAgent屬性獲取用戶當前使用的操作系統信息

History對象

History對象包含用戶在瀏覽器中訪問過的URL(網址)

length屬性：History對象的length屬性可以獲取用戶在瀏覽器中訪問網址的數量

console.log("用戶訪問的網址數量為："+history.length);

History對象還提供了以下方法實現瀏覽器前進和后退功能

forward()：實現跳轉下一個頁面，作用和瀏覽器的前進按鈕一樣
back()：實現跳轉上一個頁面，作用和瀏覽器的回退按鈕一樣
go()：實現跳轉到指定的頁面，如果為負數表示后退，如果為正數表示前進

Location對象

Location對象包含了瀏覽器的地址欄中的信息，該對象主要用于獲取和設置地址
Location對象很特別，因為該對象既是Window對象的屬性，又是Document對象的屬性

console.log(window.location==document.location);//true

Location對象的屬性

Location對象不僅存儲了地址欄中的信息，還提供了解析功能，可以通過不同的Location對象的屬性訪問不同的地址欄中的信息

host：返回服務器名稱和端口號

hostname：返回服務器名稱

href：返回當前加載頁面的完整URL

pathname：返回當前URL中的目錄和文件名

port：返回當前URL中的端口號

protocol：返回頁面使用的網絡協議

Location對象的方法

assign()：載入一個新的文檔，作用和直接修改Location相同

reload()：重新載入當前文檔，作用和刷新按鈕一樣，參數為true時，則會強制清空緩存刷新頁面

replace()：用新的文檔替換當前文檔(不會生成歷史記錄，不能使用回退按鈕回退)

定時器

定時器的具體方法由Window對象提供

延遲執行：指的是指定程序代碼在指定時間后被執行，而不是立即被執行

setTimeout()方法設置一個定時器，該定時器在定時器到期后執行一個函數或指定的一段代碼

var timeoutID=scope.setTimeout(function,delay);
function:要調用的函數或要執行的代碼
delay:延遲的毫秒數(一秒等于1000毫秒)，函數的調用會在該延遲之后發生。如果省略該參數，delay取默認值0

該方法的返回值timeoutID是一個正整數，表示定時器的編號。這個值可以傳遞給clearTimeout()來取消該定時

周期執行：指的是指定程序代碼在指定時間為間隔，重復被執行

setInterval()方法重復調用一個函數或執行一個代碼段，在每次調用之間具有固定的時間延遲

var timeoutID=scope.setInterval(function,delay);

function:要調用的函數或要執行的代碼
delay:延遲的毫秒數(一秒等于1000毫秒)，函數的調用會在該延遲之后發生，如果省略該參數，delay取默認值0
該方法的返回值timeoutID是一個正整數，表示定時器的編號，這個值可以傳遞給clearInterval()來取消該定時

GPU云服務器云服務器云服務器那些事聊聊聊聊webrtc網關那些奇怪的錯誤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97492.html

在 RustCon Asia 開啟之前，聊聊 Rust 中國社區那些事

摘要：而在最新出爐的開發者調查中，連續年成為最受開發者喜愛的編程語言。在杭州的冬季，這一次直播，再次點燃了中國社區。的到來月日，在中國北京，秘猿科技和將攜手開啟中國首屆社區大會。亞洲首屆 RustCon Asia 將在 4 月 20 日于北京開啟（也就是下周六啦~），大會為期?4?天，包括?20?日全天和?21?日上午的主題演講以及?22-23?日的多個主題?workshop?環節。隨著大...

xiangzhihong 2019-06-25 19:12 評論0 收藏0
字符編碼的那些事

摘要：字符編碼的那些事前言之前看到中對擴展了不少新特性，字符串操作更加友好，比如，，。其中涉及到不少字符編碼的知識，為了更好理解這些新特性，本文對字符編碼相關知識做一個較全面的梳理和總結。字符編碼的那些事前言之前看到ES6中對String擴展了不少新特性，字符串操作更加友好，比如u{1f914}，codePointAt()，String.fromCodePoint()。其中涉及到不少字...

shadajin 2019-08-20 16:48 評論0 收藏0
字符編碼的那些事

摘要：字符編碼的那些事前言之前看到中對擴展了不少新特性，字符串操作更加友好，比如，，。其中涉及到不少字符編碼的知識，為了更好理解這些新特性，本文對字符編碼相關知識做一個較全面的梳理和總結。字符編碼的那些事前言之前看到ES6中對String擴展了不少新特性，字符串操作更加友好，比如u{1f914}，codePointAt()，String.fromCodePoint()。其中涉及到不少字...

kviccn 2019-08-01 16:52 評論0 收藏0
聊聊Ajax那些事

摘要：年初，許多事件使得被大眾所接受。這使得應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。調用方法后立即觸發，若未被調用則不會觸發此事件。了解Ajax的起源、概念及特點起源該技術在1998年前后得到了應用。允許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件由Outlook Web Access小組寫成。該組...

v1 2019-08-29 11:08 評論0 收藏0