BOM

BOM

BOM   浏览器对象模型    B - Browser    O - Object     M - Model

BOM包含: history、location、navigator、screen 对象

location对象

1、hash: 返回hash值

    https://xxx.com/#sdfsdf       // '#sdfsdf'

2、host: 返回主机地址  'xxx.com'

3、hostname: 返回主机名  'xxx.com'

4、href: 整个url地址  "https://xxx.com/search?q=BOM"

5、origin: 起源  'https://xxx.com'

6、pathName: 路由名

    "https://xxx.com/search?q=BOM"   '/search'

7、port: 端口

8、protocol: 协议  'https'

9、search: 参数 '?q=BOM'

10、reload(): 刷新浏览器

    location.reload(); // 重新加载（有可能从缓存中加载）
    location.reload(true); // 重新加载（从服务器重新加载）

screen

1、width、height: 整天个屏幕的宽、高

2、avaiWidth、avaiHeight: 返回显示屏幕的宽、高 除dock和系统上面的菜单栏

3、pixelDepth: 返回显示屏幕的颜色分辨率

4、updateInteval: 设置或返回屏幕刷新率

history

1、length: 历史记录的个数

2、go(): 指定跳转的历史、-1后退一页，1前进一页

3、back()、forward(): 后退和前进一页

navigator

1、appCodeName: 浏览器代码名 'Mozilla'

2、appName: 浏览器名称    'Netscape'

3、appVersion: 浏览器版本  '5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36'

4、browserLanguage: 浏览器语言

5、cookieEnabled: 是否启用了cookie 返回Boolean

    如果浏览器关闭cookie，当获取cookie时， document.cookie 返回的是空字符串

6、cpuClass: 返回浏览器系统的cpu等级

8、onLine: 是否处于脱机模式，Boolean

9、platform: 浏览器的操作平台

10、systemLanguage: 系统语言

11、userAgent: 客户机发送服务器的 user-agent 头部的值

12、userLanguage: 返回 OS 的自然语言设置


** 检测插件  ie无效
function hasPlugin(name){
    name = name.toLowerCase();
    for (var i = 0; i < navigator.plugins.length; i ++){
        if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
    return false;
}

** 检测Flash
function hasPlugin(name){
    name = name.toLowerCase();
    for (var i = 0; i < navigator.plugins.length; i ++){
        if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
    return false;
}

function hasIEPlugin(name){
    try{
        new ActiveXObject(name);
        return true;
    }catch(ex){
        return false;
    }
}

function hasFlash(){
    var result = hasPlugin("Flash");
    if (!result){
        result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
    }
    return result;
}

console.log(hasFlash()) //true

window 对象

1、window.open(url, target, param): 打开一个新窗口

2、window.close(): 关闭一个窗口

3、setInterval()、clearInterval()

4、setTimeout()、clearTimeout()

5、screenLeft、screenTop: 浏览器当前窗口居屏幕的左、上角的位置  

    兼容:
    screenLeft || screenX
    screenTop || screenY

6、innerWidth、innerHeight: 浏览器可视区的宽高、包括滚动条

    let winHeight = window.innerHeight;

7、moveTo(x, y): 移动到屏幕左上角的位置

8、moveBy(0, 100): 向下移动100像素

9、resizeTo(x,y)、resizeBy(w, h)

offset 页面元素偏移量

1、offsetWidth、offsetHeight: 获取当前元素宽高，相当于 width + padding + border

2、offsetLeft、offsetTop: 获取元素到父级元素定位的左、上偏移，如果父级不是定位就以body元素为定位

3、offsetParent: 获取最近一个带有定位的父级元素

4、clientWidth、clientHeight: 元素本身的宽高、不包括padding和border

    兼容
    document.documentElement.clientWidth || document.body。clientWidth
    document.documentElement.clientHeight || document.body。clientHeight

scroll 滚动类

窗口滚动条或带滚动条元素

1、scrollWidth、scrollheight: 对象内部实际内容的宽、高

2、scrollTop、scrollLeft: 被卷部分的顶部和左侧部分

    只挂载到了Element元素中，window和document下都没有

    let topValue = document.documentElement.scrollTop || document.body.scrollTop;       // 获取整个页面巻上去的高度和兼容方法

    let topValue = document.querySelector('#sider').scrollTop;      // 针对某个元素


3、onscroll: 侦听滚动条事件

client 鼠标所在的可视区坐标

1、clientX、clientY: 获取鼠标可视区的位置  clientX = width + padding

2、clientLeft、clientTop: 获取鼠标在可视区域的位置

3、pageX、pageY: 获取鼠标在页面中的位置， pageX = clientX + 页面滚动出的距离

node.onclick = function(evt){
    let evt = evt || window.evnet;
    console.log(evt.pageX, evt.pageY);
    console.log(evt.pageX, evt.pageY);
}

事件

1、target: 点击的目标阶段事件，ie8之前使用srcElement

    var oT = evt.target || srcElement; console.log(oT);     // <p>xxxx</p>

2、currentTarget: 事件流的捕获，目标及冒泡阶段

3、addEventListener()、attachEvent(): 注册事件

    addEventListener('click', fn, false);