BOM的介紹與應用

時間 2019-11-09

標籤 bom 介紹應用简体版

原文原文鏈接

BOM的介紹與使用以及它們之間的關係

什麼是bom

BOM(Browser object Model)瀏覽器對象模型

bom的對象有6種，分別是：

window

navigator

location

screen

history

document

window對象

打開

【案例】

<input type="button" value="打開" id="btn"/>

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function (){
            //第一個參數是地址URL
            //第二個參數打開位置  _self在當前頁面打開    _blank在新窗口打開（默認）
            window.open("http://www.baidu.com" , "_blank")
        }
    </script>

關閉(只能關閉程序打開的窗口)

【案例】

<input type="button" value="關閉" id="btn"/>

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function (){
            //只能關閉程序打開的窗口
            window.close();
        }
    </script>

navigator對象

navigator.userAgent(用來描述一些瀏覽器的版本信息)

【案例】不一樣瀏覽器不一樣背景色

<script>
    var ua = navigator.userAgent;
    //console.log(ua);
    var res = ua.match(/Chrome|Firefox|Trident/i);
    //console.log(res);
    //console.log(res[0]);
    switch(res[0]){
        //火狐
        case "Firefox" :{
            document.body.bgColor = "red";
            break;
        }
        //谷歌
        case "Chrome" :{
            document.body.bgColor = "blue";
            break;
        }
        //IE
        case "Trident" :{
            document.body.bgColor = "green";
            break;
        }
    }
</script>

location(地址、位置)對象

location屬性有

hostname主機名

href當前網頁的地址

pathname具體文件路勁

hash 以#打頭的那段爲哈希值

location方法

reload 重新加載當前頁面（刷新）

【從新加載案例】

<input type="button" value="從新加載" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        //相似於f5
        location.reload();
        //不使用本地緩存，強制刷新（相似於Ctrl+f5）,默認是false
        location.reload(true);
    }
</script>

【頁面跳轉案例】

<input type="button" value="百度" id="btn1">
<script>
    var btn1 = document.getElementById("btn1");
    //頁面跳轉
    btn1.onclick = function(){
        //兩種
        location.href ="http://www.baidu.com" ;
        //window.open("http://www.baidu.com" , "_self")
    }
</script>

【哈希hash案例】

<input type="button" value="哈希" id="btn2">
<script>
    var btn2 = document.getElementById("btn2");
    //哈希
    btn2.onclick = function(){
       location.hash = "abc";
    }
</script>

screen(屏幕)對象

【檢測屏幕大小示例】

不同屏幕下樣式不一樣
<script>
    var lin = document.getElementById("link1");
   var aw = screen.availWidth;
   console.log(aw);
   switch (aw){
       case 1366 :{
            lin.href = "style.css";
            break;
       }
       case 1360 :{
            lin.href = "style1.css";
            break;
       }
       case 1280 :{
            lin.href = "style2.css";
            break;
       }
       case 1024 :{
            lin.href = "style3.css";
            break;
       }
       case 800 :{
            lin.href = "style4.css";
            break;
       }
   }
</script>

history(歷史)對象

【返回前進示例】

<a id="fanhui">返回</a>
<a id="qianjin">前進</a>
<script>
    var fh = document.getElementById("fanhui");
    var qj = document.getElementById("qianjin");
    //返回
    fh.onclick = function(){
        history.back();
    }
    //前進
    qj.onclick = function(){
        history.forward();
    }
</script>

history方法

history.pushState(數據,'','地址可不寫')

【示例】

<div id="suijishu"></div>
<input type="button" value="機選一注" id="btn3"></br>
<script>
    var btn3 = document.getElementById("btn3");
    var suijishu = document.getElementById("suijishu");
    var i = 0;
    //機選一注
    btn3.onclick = function(){
        var jieguo = suiji(6);
        history.pushState(jieguo,'','');
        suijishu.innerHTML = jieguo;
    }

    function suiji(n){
        var res = [];
        for(var i = 0; i<n ; i++){
            //產生隨機數
            res.push(Math.ceil(Math.random()*36));
        }
        return res.join(",")
    }
    //當哈希值改變的時候執行
    window.onpopstate = function(e){
        var aaa=  e.state;
        suijishu.innerHTML = aaa;
    }
</script>