BOM

時間 2019-11-12

標籤 bom 简体版

原文原文鏈接

BOM(Browser Objects Model)：操做瀏覽器部分功能的API。javascript

BOM的結構圖

window對象是BOM的頂層(核心)對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象。
DOM是BOM的一部分。

window對象：

window對象是JavaScript中的頂級對象。
全局變量、自定義函數也是window對象的屬性和方法。
window對象下的屬性和方法調用時，能夠省略window。

打開窗口、關閉窗口

打開窗口：html
```
window.open(url,target);
```
參數解釋：html5
- url：要打開的地址。
- target：新窗口的位置。能夠是：_blank 、_self、 _parent 父框架。

關閉窗口java

window.close();
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <!--行間的js中的open() window不能省略-->
        <button onclick="window.open('https://www.baidu.com/')">百度搜索</button>

        <button>打開百度</button>
        <button onclick="window.close()">關閉</button>
        <button>關閉</button>

    </body>
    <script type="text/javascript">

        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];

        oBtn.onclick = function(){
                      //open('https://www.baidu.com')

            //打開空白頁面
            open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否關閉？")){
                close();
            }
        }
    </script>
</html>

location對象

window.location能夠簡寫成location。location至關於瀏覽器地址欄，能夠將url解析成獨立的片斷。linux

location對象的屬性

href：跳轉
hash 返回url中#後面的內容，包含#
host 主機名，包括端口
hostname 主機名
pathname url中的路徑部分
protocol 協議通常是http、https
search 查詢字符串

案例模擬a標籤跳轉

<body>
<span>luffy</span>
<script>

    var oSpan = document.getElementsByTagName("span")[0];

    oSpan.onclick = function () {
        location.href = "http://www.baidu.com";   //點擊span時，跳轉到指定連接
 //     window.open("http://www.baidu.com"","_blank");  //方式二 跳轉
    }

</script>
</body>

location對象的方法

window.location.reload(); //全局刷新頁面，至關於瀏覽器導航欄上 刷新按鈕

navigator對象

window.navigator 的一些屬性能夠獲取客戶端的一些信息。api

userAgent：系統，瀏覽器)瀏覽器

platform：瀏覽器支持的系統，win/mac/linuxsession

console.log(navigator.userAgent);
console.log(navigator.platform);

history對象

一、後退：框架

history.back()
history.go(-1)：0是刷新

二、前進：函數

history.forward()
history.go(1)

HTML5 存儲技術 localStorage sessionStorage

對瀏覽器來講，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，並且容量更大，它包含兩種：localStorage 和 sessionStorage

sessionStorage（臨時存儲） ：爲每個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面從新加載

localStorage（長期存儲） ：與 sessionStorage 同樣，可是瀏覽器關閉後，數據依然會一直存在

API

sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉換成JSON

1.保存數據到本地

let info = {
    name: 'Lee',
    age: 20,
    id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2.從本地存儲獲取數據

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3.本地存儲中刪除某個保存的數據

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.刪除全部保存的數據

sessionStorage.clear();
localStorage.clear();

5.監聽本地存儲的變化

Storage 發生變化（增長、更新、刪除）時的 觸發，同一個頁面發生的改變不會觸發，只會監聽同一域名下其餘頁面改變 Storage
 window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })