技術(shù)是自由的靠山

本文長(zhǎng)期更新把曼，如有錯(cuò)誤，還請(qǐng)指正
關(guān)注一下不迷路 =.=

BOM漓穿，瀏覽器對(duì)象模型

window 對(duì)象

window 對(duì)象時(shí)JS的全局作用域，所有的全局變量都?xì)w納為window的屬性注盈。

注：

• window.xx 和 var xx 的區(qū)別
  var xx定義的變量不可通過(guò) delelte window.xx 刪除
• 判斷全局變量是否定義
  window.xx===undefined

window和frame的關(guān)系

極少用到frame晃危，暫不作詳述

窗口大小

這里只說(shuō)視口的大小

window.open()

window.open(url,windowName,optionsStr,bool) 返回一個(gè)窗口對(duì)象的引用，可以使用此對(duì)象移動(dòng)老客、關(guān)閉窗口

• windowName 如果存在僚饭，則聚焦否則新建
• optionsStr 字符串形式的配置項(xiàng)，

location 對(duì)象

location 即屬于是window對(duì)象也是document對(duì)象

image.png

location.href

返回當(dāng)前頁(yè)面的完整url

location.href
// "http://www.reibang.com/writer#/notebooks/256102535/notes/29153954/preview"

注：使用此方法或者 window.location=xx 進(jìn)行頁(yè)面跳轉(zhuǎn)

location.protocol

返回協(xié)議類(lèi)型

location.protocol
//"https:"

location.host

• location.host 返回地址和端口號(hào)
• location.hostname 返回地址
• location.port 返回端口號(hào)

location.host
// "www.reibang.com"

location.hash

返回hash部分（#號(hào)后面）

location.hash
// "#/notebooks/256102535/notes/29153954/preview"

注：react-router中的hashRouter貌似就使用的hash管理路由的

location.search

返回查詢(xún)部分（胧砰？后面）

location.search
// "?id=1570130098213052&wfr=spider&for=pc"

navigator 對(duì)象

用于識(shí)別瀏覽器鳍鸵，一般都使用 userAgent 來(lái)區(qū)分，此屬性不同瀏覽器包含不同的特定的字段：

    //edge
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393"
    //ie11
    "mozilla/5.0 (windows nt 6.3; trident/7.0; rv:11.0) like gecko"
    //ie10
    "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"
    //ie9
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"
    //ie8
    "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)"
    //firefox
    "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0"
    //chrome
    "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.7 Safari/537.36"

一個(gè)檢測(cè)瀏覽器和其版本的函數(shù) ：

function getVersion() {
    var ua = window.navigator.userAgent.toLowerCase();
    
    //順序很重要
    //Edg
    if(ua.indexOf("edge") > -1){
        var ver = ua.match(/edge\/([\d.]+)/)[1];
        return { type: "edge", version: ver };
    }
    //ie11
    if(ua.indexOf(") like Gecko")>-1){
        var ver = ua.match(/rv\:([\d.]+)/)[1];
        return { type: "IE", version: ver };
    }
    //ie
    if (ua.indexOf("msie") >= 0) {
        var ver = ua.match(/msie ([\d.]+)/)[1];
        return { type: "IE", version: ver };
    }
    //firefox
    else if (ua.indexOf("firefox") >= 0) {
        var ver = ua.match(/firefox\/([\d.]+)/)[1];
        return { type: "Firefox", version: ver };
    }
    //Chrome
    else if (ua.indexOf("chrome") >= 0) {
        var ver = ua.match(/chrome\/([\d.]+)/)[1];
        return { type: "Chrome", version: ver };
    }
    //Opera
    else if (ua.indexOf("opera") >= 0) {
        var ver = ua.match(/opera.([\d.]+)/)[1];
        return { type: "Opera", version: ver };
    }
    //Safari
    else if (ua.indexOf("Safari") >= 0) {
        var ver = ua.match(/version\/([\d.]+)/)[1];
        return { type: "Safari", version: ver };
    }
}

screen對(duì)象

history

參考

• 《javascript高級(jí)程序設(shè)計(jì)》

• js檢測(cè)是什么瀏覽器并輸出版本號(hào)