前端學習_09.Javascript BOM
阿新 • • 發佈：2019-02-18
JavaScript BOM
定義
- Borwse Object Model 瀏覽器物件模型
- DOM:操作當前文件中的節點
- BOM:操作當前瀏覽器本身的一些屬性
Window 物件
-
BOM的核心物件是window,它表示瀏覽器的一個例項
- 所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
- 甚至 HTML DOM 的 document 也是 window 物件的屬性之一
Window Location
- BOM的核心物件是window,它表示瀏覽器的一個例項
- window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
- location 物件的屬性
| 屬性 | 描述 | 輸出 |
|---|---|---|
| location.hostname | 返回 web 主機的域名 | |
| location.pathname | 返回當前頁面的路徑和檔名 | /Uncle_nly |
| location.port | 返回 web 主機的埠 （80 或 443） | 80 |
| location.protocol | 返回所使用的 web 協議（http:// 或 https://） | https: |
- location 物件的方法
- assign() 跳轉到指定頁面,與href等效;
- reload() 過載當前URL;
- replace() 用新的URL替換當前頁面;
Window History
- window.history 物件包含瀏覽器的歷史
- history物件的屬性
| 屬性 | 描述 |
|---|---|
| length | history物件中的記錄數; |
- history物件的方法
| 方法 | 描述 |
|---|---|
| history.back() | 與在瀏覽器點選後退按鈕相同 |
| history.forward() | 與在瀏覽器中點擊向前按鈕向前相同 |
| history.go(num) | 瀏覽器在history物件中向前(-x)或向後(x) |
Window Screen
- screen 物件包含有關使用者螢幕的資訊。
- screen 物件的屬性
| 屬性 | 描述 | 輸出 |
|---|---|---|
| availWidth | 可用的螢幕寬度 | 1366 |
| availHeight | 可用的螢幕高度 | 728 |
彈窗
- 彈出提示框
| 彈窗 | 描述 |
|---|---|
| alert | 僅僅只是彈出提示框，沒有任何返回值，沒有後續 |
| confirm | 彈出後，當你點選相應按鈕會得到相應結果（是->true 取消->false） |
| prompt | 彈出可輸入內容的提示框：如果說點選的是確定，返回的結果當前你輸入的內容 ，如果說點選的是取消，返回的是null |
open方法
- 可以導航到一個特定的URL,也可以開啟一個新的瀏覽器視窗
- 語法
- open(URL,name,features,replace)
- 如果說點選的是取消，返回的是null
- 引數
- URL:要載入的URL;
- Name:視窗的名稱或視窗目標;
- Features:一個特定字串
- Replace:一個表示新頁面是否取代瀏覽器記錄中當前載入頁面的布林值;
- open(‘http://www.baidu.com’,‘baidu’,‘width=400,height=400,top=200,left=200,toolbar=yes’);
- 可以設定當前彈出新窗體的特徵屬性：寬高和偏移量
- open和a標籤跳轉本質的區別
- open彈出來的新窗體和原來的父窗體是有關聯的
- open()本身返回window物件，父窗體可以操作返回的新窗體的dom物件
- 新窗體opener屬性值是父窗體，新窗體可以操作返回的父窗體的dom物件
- 不要混淆方法 Window.open() 與方法 Document.open()，這兩者的功能完全不同。為了使程式碼清楚明白，請使用 Window.open()，而不要使用 open()。
- 頁面跳轉的方式：open方法、location.href方式
計時器
- setInterval：間隔指定的毫秒數不停地迴圈執行指定的程式碼。
- 引數
- 第一個引數是函式（function）
- 第二個引數間隔的毫秒數，時間毫秒單位
- clearInterval：停止定時器setInterval
- setTimeout：在指定的毫秒數後執行指定程式碼，只執行一次
- 引數
- 第一個引數是字串資訊
- 第二個引數間隔的毫秒數，時間毫秒單位
- 引數
- clearTimeout：停止定時器setTimeout