JavaScript瀏覽器事件物件

weixin_46402513發表於2020-10-08

瀏覽器物件模型(BOM):
1、 宿主物件
2、 提供了很多物件,用於訪問瀏覽器的功能,這些功能與任何網頁內容無關
3、 將瀏覽器中的各個部分轉換成一個一個的物件,我們通過修改這些物件的屬性,呼叫他們的方法,從而控制瀏覽器的各種行為
簡單來說:BOM可以使我們通過JS來操作瀏覽器,在BOM中提供了一組物件,用於完成對瀏覽器的操作
(這些BOM物件在瀏覽器中都是作為window物件的屬性儲存,可通過window物件來使用,也可以直接使用)
1、 window物件:代表整個瀏覽器視窗、同時window也是網頁中的全域性物件{

2、 Navigator物件:代表的當前瀏覽器的資訊,通過該物件可以來識別不同的瀏覽器
userAgent(不能用來識別IE瀏覽器)、ActiveXobject(專門用來識別IE瀏覽器)
不同的瀏覽器通過useragent、activeXobject識別出來的瀏覽器資訊也不同
瀏覽器相容:


            var web = navigator.userAgent; //獲取瀏覽器資訊
            if (/firefox/i.test(web)) {
                alert("這是火狐瀏覽器");
            } else if (/Chrome/i.test(web)) {
                alert("這是谷歌瀏覽器");
            } else if ("ActiveXObject" in window) {
                alert("這是IE瀏覽器");
            }

3、 Location:代表瀏覽器的位址列資訊,通過location可以獲取位址列資訊,或則操作瀏覽器頁面跳轉
(1)位址列說明:

(2) hash 設定或返回從井號 (#) 開始的 URL(錨)。
host 設定或返回主機名和當前 URL 的埠號。
hostname 設定或返回當前 URL 的主機名。
href 設定或返回完整的 URL。
pathname 設定或返回當前 URL 的路徑部分。
port 設定或返回當前 URL 的埠號。
protocol 設定或返回當前 URL 的協議。
search 設定或返回從問號 (?) 開始的 URL(查詢部分)。

(3) -assign()用來跳轉到其他頁面,與location的修改類似,
-reload()重新載入當前文件,作用域重新整理按鈕一樣
如果傳遞一個true作為引數,則會強制清空快取、重新整理頁面
-raplace()-用新的地址替換當前的文件地址,呼叫完畢會跳轉頁面、、-不會生成歷史記錄、不能使用回退按鈕

4、 History:代表瀏覽器的歷史記錄,可以通過該物件來操作瀏覽器的歷史記錄
由於隱私問題該物件不能獲取到具體的歷史記錄,只能操作瀏覽器向前或向後翻頁,而且該操作只在當次訪問時有效{
Length:返回返回瀏覽器歷史列表中的 URL 數量。
1、 history.back() //後一頁
2、 history.forward() //前一頁
3、 history.go(1) //前一頁
4、 history.go(-1) //後一頁

}
5、 Screen:代表使用者的螢幕的資訊,通過該物件可以獲取到使用者的顯示器的相關資訊
{
availHeight:返回螢幕的高度(不包括window的工作列)。

availWidth:返回螢幕的寬度(不包括window的工作列)。

height:返回螢幕的總高度。

width:返回螢幕的總寬度。

colorDepth:返回裝置上調色盤的位元深度。

pixelDepth:返回螢幕的顏色解析度(畫素的位數)。

相關文章