成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

知識整理——瀏覽器對象模型

mayaohua / 2894人閱讀

摘要：瀏覽器對象模型什么是瀏覽器對象模型瀏覽器對象模型瀏覽器模型提供了獨(dú)立于內(nèi)容的可以與瀏覽器窗口進(jìn)行滑動的對象結(jié)構(gòu)，就是瀏覽器提供的其主要對象有對象的核心，是訪問瀏覽器的接口，也是規(guī)定的對象對象提供當(dāng)前窗口中的加載的文檔有關(guān)的信息和一些導(dǎo)航功能

瀏覽器對象模型 什么是瀏覽器對象模型

BOM ：Browser Object Model（瀏覽器對象模型）,瀏覽器模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行滑動的對象結(jié)構(gòu)，就是瀏覽器提供的 API

其主要對象有：
1、window 對象——BOM 的核心，是 js 訪問瀏覽器的接口，也是 ES 規(guī)定的 Global 對象
2、location 對象：提供當(dāng)前窗口中的加載的文檔有關(guān)的信息和一些導(dǎo)航功能。既是 window 對象屬 性，也是 document 的對象屬性
3、navigation 對象：獲取瀏覽器的系統(tǒng)信息
4、screen 對象：用來表示瀏覽器窗口外部的顯示器的信息等
5、hitory 對象：保存用戶上網(wǎng)的歷史信息

Window 對象 
windows 對象是整個瀏覽器對象模型的核心，其扮演著既是接口又是全局對象的角色

window 對象的屬性和方法

屬性 說明
alert() 系統(tǒng)警告對話框，接收字符串參數(shù)并顯示
confirm() 系統(tǒng)確認(rèn)對話框，可提供確認(rèn)或取消兩種事件
prompt() 提示對話框，可對用戶展示確認(rèn)、取消事件外，還可提供文本域
open() 可導(dǎo)航至特定的 url，又可打開一個新的瀏覽器窗口window.open(要加載的url, 窗口目標(biāo), 一個特定字符串, 一個新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值)
onerror() 事件處理程序，當(dāng)未捕獲的異常傳播到調(diào)用棧上時就會調(diào)用它，并把錯誤消息輸出到瀏覽器的 JavaScript 控制上。window.onerror(描述錯誤的一條消息, 字符串--存放引發(fā)錯誤的JavaScript代碼所在的文檔url, 文檔中發(fā)生錯誤的行數(shù))
setTimeout() 超時調(diào)用——在指定的時間過后執(zhí)行代碼window.setTimeout(function(){...}, 毫秒)
setInterval() 間歇調(diào)用——每隔指定的時間就執(zhí)行一次window.setInterval(function(){...}, 毫秒)

應(yīng)用場景應(yīng)用場景：
1、確認(rèn)窗口位置及大小
獲取窗口位置的屬性與方法

屬性 說明 兼容性
screenLeft 窗口相對于屏幕左邊的位置 適用于IE、Safari、Chrome
screenTop 窗口相對于屏幕上邊的位置 適用于IE、Safari、Chrome
screenX 窗口相對于屏幕左邊的位置 適用于Firefox
screenY 窗口相對于屏幕上邊的位置 適用于Firefox
moveBy(x,y) 接收的是在水平和垂直方向上移動的像素數(shù) 全兼容
moveTo(x,y) 接收的是新位置的x和y坐標(biāo)值 全兼容

跨瀏覽器獲取窗口左邊和上邊位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX

var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY

窗口大小屬性與方法

屬性 說明
innerWidth
innerHeight 		IE9+、Safari、Firefox、Opera: 該容器中頁面視圖區(qū)的大小
Chrome: 返回視口大小
移動設(shè)備： 返回可見視口（即屏幕上可見頁面區(qū)域的大?。?
移動IE瀏覽器： 不支持該屬性,當(dāng)移動IE瀏覽器將布局視口的信息保存至document.body.clientWidth與document.body.clientHeight中
outerWidth
outerHeight 		IE9+、Safari、Firefox: 返回瀏覽器窗口本身的尺寸
Opera: 返回頁面視圖容器的大小
Chrome: 返回視口大小
resizeTo(width, height) 接收瀏覽器窗口的新寬度與新高度
resizeBy(width, height) 接收新窗口與原窗口的寬度與高度之差

2、導(dǎo)航和打開窗口

屬性 說明
open(url,[target,string,boolean]) url: 要加載的URL，
target: 窗口目標(biāo)
string: 特定的字符串，以逗號分隔的字符串表示新窗口顯示的特性
boolean: 表示新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值

3、定時器
setTimeout()與setInterval()都是由于 JavaScript 的語言特性所產(chǎn)生的，由于 JavaScript 是一個單線程的解釋器，因此一定時間內(nèi)只能執(zhí)行一段代碼，為了控制要執(zhí)行的代碼，便有了一個 JavaScript 隊(duì)列。這些任務(wù)會按照將他們添加到隊(duì)列的順序執(zhí)行。setTimeout()和setInterval()的第二個參數(shù)會告訴 JavaScript 再過多長時間把當(dāng)前任務(wù)添加到隊(duì)列中。如果隊(duì)列是空的，那么添加的代碼會立即執(zhí)行；如果隊(duì)列不是空的，那么它就要等前面的代碼執(zhí)行完了之后再執(zhí)行。
兩者在被調(diào)用之后，都會返回一個數(shù)值 ID，這個 ID 可以用來取消對該方法的調(diào)用
下面是一段倒計時的代碼

 
 var num = 10 
 var interval = setInterval(function(){ 
     num -- 
     console.log(num)
     if(num == 0) { 
         clearInterval(interval) 
         console.log("Done") 
     } 
 }, 1000)  


 
 var num = 10
 var timeout = function(){
     num--
     console.log(num)
     if(num > 0){
         setTimeout(timeout, 1000)
     }else {
         console.log("Done")
     }
 }
 setTimeout(timeout,1000)
上面使用兩種方法都可以進(jìn)行倒計時，但是使用 `setInterval()` 方法的時候，再不加干涉的情況下，該方法會一直執(zhí)行到頁面的卸載，所以一般情況下`serInterval()`比較消耗性能。然后`setTimeout()`方法可以通過調(diào)用自身完成間歇調(diào)用的功能。所以說，在一般情況下使用`setTimeout()`來完成超時與間歇調(diào)用。
Location 對象 
提供當(dāng)前窗口中的加載的文檔有關(guān)的信息和一些導(dǎo)航功能。既是 window 對象屬性，也是 document 的對象屬性
window.location === document.location  //true
location 還將 url 解析為獨(dú)立的片段，可通過 location 的屬性來訪問不同的片段

location 對象的主要屬性：

屬性名 例子 說明
hash " #host " 返回 url 中的 hash（#后字符>=0）
host " juejin.im:80 " 服務(wù)器名稱+端口（如果有）
hostname " juejin.im " 只含服務(wù)器名稱
href " https://juejin.im/book/5a7bfe... " 當(dāng)前加載頁面的完整的 url
pathname " /book/5a7bfe595188257a7349b52a " 返回 url 的的目錄和（或）文件名
port " 8080 " url 的端口號，如果不存在則返回空
protocol " https: (or http:) " 頁面使用的協(xié)議
search " ?name=aha&age=20 " 返回 url 的查詢字符串， 以問號開頭

location 的應(yīng)用場景：
1、解析 url 查詢字符串參數(shù)，并將其返回一個對象，可通過循環(huán)、正則來實(shí)現(xiàn)，方法有很多,實(shí)現(xiàn)的大體思路是：
通過location的search屬性來獲取當(dāng)前 url 傳遞的參數(shù)，如果 url 中有查詢字符串的話就將其問號截取掉，然后再遍歷里面的字符串并以等號為斷點(diǎn)，使用decodeURIComponent()方法來解析其參數(shù)的具體數(shù)值，并將其放在對象容器中，并將其返回
2、載入新的文檔，也可以說是刷新頁面，主要有三個方法：

assign()： location.assign("http://www.xxx.com")就可立即打開新 url 并在瀏覽器是我歷史中生成一條新的記錄, 在一個生成了 5 條瀏覽記錄的頁面中，然后使用 assign()跳轉(zhuǎn) url 后，history 記錄只剩兩條，一條是通過 assign 跳轉(zhuǎn)的頁面，另一條則是上一個頁面（使用 assign()跳轉(zhuǎn)方法的頁面），其余的所有頁面都被清除掉了

replace(): location.replace("http://www.bbb.com")只接受 url 一個參數(shù)，通過跳轉(zhuǎn)到的 url 界面不會在瀏覽器中生成歷史記錄，就是 history 的 length 不會+1，但是會替代掉當(dāng)前的頁面

reload(): 其作用是重新加載當(dāng)前顯示的頁面，當(dāng)不傳遞參數(shù)的時候，如果頁面自上次請求以來并沒有改變過，頁面就會從瀏覽器中重新加載，如果傳遞true，則會強(qiáng)制從服務(wù)器重新加載

Navigation 對象 
navigation 接口表示用戶代理的狀態(tài)和標(biāo)識，允許腳本查詢它和注冊自己進(jìn)行一些活動

navigation 對象的屬性方法


navigation 應(yīng)用場景

檢測插件

注冊處理程序

Screen 對象 
其提供有關(guān)窗口顯示的大小和可用的顏色輸入信息。

screen 對象的屬性和方法


History 對象 
history 對象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起，history 對象是用窗口的瀏覽歷史用文檔和文檔狀態(tài)列表的形式表示。history 對象的 length 屬性表示瀏覽歷史列表中的元素數(shù)量，但出于安全考慮，腳本不能訪問已保存的 url

History 對象的屬性及方法

屬性 說明
go() 1、以在用戶的歷史記錄中任意跳轉(zhuǎn)，go(n)表示前進(jìn) n 頁， go(-n)表示后退 n 頁(n>0) 2、go()可以傳遞字符串參數(shù)，瀏覽器歷史中如果有這條 url 則實(shí)現(xiàn)跳轉(zhuǎn)至包含該字符串的第一個位置，否則什么也不做
back() 后退一頁
forword() 前進(jìn)一頁
length 保存歷史記錄的數(shù)量，可用于檢測當(dāng)前頁面是否是用戶歷史記錄的第一頁（history.length === 0）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94014.html

相關(guān)文章

  • 前端面試（知識點(diǎn)）整理（一）

    摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級元素的事件，但是只有當(dāng)滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動布局` Document ...

    zhichangterry 評論0 收藏0

  • 前端面試（知識點(diǎn)）整理（一）

    摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級元素的事件，但是只有當(dāng)滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動布局` Document ...

    Songlcy 評論0 收藏0

  • 前端面試（知識點(diǎn)）整理（一）

    摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級元素的事件，但是只有當(dāng)滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動布局` Document ...

    ThreeWords 評論0 收藏0

  • 【連載】前端個人文章整理-從基礎(chǔ)到入門

    摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<