国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

mayaohua / 2888人閱讀

摘要：瀏覽器對象模型什么是瀏覽器對象模型瀏覽器對象模型瀏覽器模型提供了獨立于內容的可以與瀏覽器窗口進行滑動的對象結構，就是瀏覽器提供的其主要對象有對象的核心，是訪問瀏覽器的接口，也是規定的對象對象提供當前窗口中的加載的文檔有關的信息和一些導航功能

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

BOM ：Browser Object Model（瀏覽器對象模型）,瀏覽器模型提供了獨立于內容的、可以與瀏覽器窗口進行滑動的對象結構，就是瀏覽器提供的 API

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

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

window 對象的屬性和方法

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

應用場景應用場景：
1、確認窗口位置及大小
獲取窗口位置的屬性與方法

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

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

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: 該容器中頁面視圖區的大小
Chrome: 返回視口大小
移動設備： 返回可見視口（即屏幕上可見頁面區域的大小）
移動IE瀏覽器： 不支持該屬性,當移動IE瀏覽器將布局視口的信息保存至document.body.clientWidth與document.body.clientHeight中
outerWidth
outerHeight 		IE9+、Safari、Firefox: 返回瀏覽器窗口本身的尺寸
Opera: 返回頁面視圖容器的大小
Chrome: 返回視口大小
resizeTo(width, height) 接收瀏覽器窗口的新寬度與新高度
resizeBy(width, height) 接收新窗口與原窗口的寬度與高度之差

2、導航和打開窗口

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

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

 
 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)
上面使用兩種方法都可以進行倒計時，但是使用 `setInterval()` 方法的時候，再不加干涉的情況下，該方法會一直執行到頁面的卸載，所以一般情況下`serInterval()`比較消耗性能。然后`setTimeout()`方法可以通過調用自身完成間歇調用的功能。所以說，在一般情況下使用`setTimeout()`來完成超時與間歇調用。
Location 對象 
提供當前窗口中的加載的文檔有關的信息和一些導航功能。既是 window 對象屬性，也是 document 的對象屬性
window.location === document.location  //true
location 還將 url 解析為獨立的片段，可通過 location 的屬性來訪問不同的片段

location 對象的主要屬性：

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

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

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

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

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

Navigation 對象 
navigation 接口表示用戶代理的狀態和標識，允許腳本查詢它和注冊自己進行一些活動

navigation 對象的屬性方法


navigation 應用場景

檢測插件

注冊處理程序

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

screen 對象的屬性和方法


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

History 對象的屬性及方法

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

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

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

相關文章

  • 前端面試（知識點）整理（一）

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

    zhichangterry 評論0 收藏0

  • 前端面試（知識點）整理（一）

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

    Songlcy 評論0 收藏0

  • 前端面試（知識點）整理（一）

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

    ThreeWords 評論0 收藏0

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

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

    madthumb 評論0 收藏0

發表評論

0條評論

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