JavaScript-BOM

2019-08-13  本文已影响0人  遇明不散

BOM

什么是BOM
BOM中常用对象
navigator示例
<script>
    // console.log(window.navigator);
    let agent = window.navigator.userAgent;
    if (/chrom/i.test(agent)){
        alert("当前是谷歌浏览器");
    }else if (/firefox/i.test(agent)){
        alert("当前是火狐浏览器");
    }else if (/msie/i.test(agent)){
        alert("当前是低级IE浏览器");
    }else if ("ActiveXObject" in window){
        alert("当前是高级IE浏览器");
    }
</script>
location示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
</head>
<body>
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script>
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    let oBtn3 = document.querySelector("#btn3");
    let oBtn4 = document.querySelector("#btn4");
    
    // 获取地址信息
    oBtn1.onclick = function () {
        console.log(window.location.href);
    };
    // 设置地址信息
    oBtn2.onclick = function () {
        console.log(window.location.href = "https://www.baidu.com/");
    };
    // 重新加载界面
    oBtn3.onclick = function () {
        window.location.reload();
    };
    // 强制重新加载界面
    oBtn4.onclick = function () {
        window.location.reload(true);
    };
</script>
</body>
</html>
history示例
// History:   代表浏览器的历史信息, 通过History来实现刷新/前进/后退
// 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
// 前进
/*
只有当前访问过其它的界面, 才能通过forward/go方法前进
如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
*/
oBtn1.onclick = function () {
    // window.history.forward(); // 前进
    // window.history.back();  // 后退
    // window.history.go(1);  // 前进
    window.history.go(-1); // 后退
}

// 刷新
// 如果给go方法传递0, 就代表刷新
oBtn2.onclick = function () {
    window.history.go(0);
}

JavaScript获取元素宽高方式

通过getComputedStyle获取宽高
通过currentStyle属性获取宽高
通过style属性获取宽高
通过offsetWidth和offsetHeight获取

JavaScript获取元素位置方式

offsetLeft与offsetTop
offsetParent
clientWidth与clientHeight

clientWidth = 宽度 + 左内边距 + 右内边距
clientHeight = 高度 + 上内边距 + 下内边距

clientLeft与clientTop

获取元素的左边框和顶部边框

scrollWidth与scrollHeight
内容没有超出元素范围时

scrollWidth = 元素宽度 + 内边距 = clientWidth
scrollHeight = 元素高度 + 内边距 = clientHeight

内容超出元素范围时

scrollWidth = 元素宽度 + 左右内边距宽度 + 超出的宽度
scrollHeight = 元素高度 + 上下内边距的高度 + 超出的高度


三大家族.PNG
获取网页可视区域宽高
// 获取网页宽高兼容性写法
function getScreen() {
    let width = null, height = null;
    // IE9及以上高级浏览器
    if(window.innerWidth){
        width = window.innerWidth;
        height = window.innerHeight;
    // 混杂模式
    }else if(document.compatMode === "BackCompat"){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }else{
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    return {
        width: width,
        height: height
    }
}
网页滚动距离
window.onscroll = function () {
    // 1.IE9以及IE9以上的浏览器
    // console.log(window.pageXOffset);
    // console.log(window.pageYOffset);

    // 2.标准模式下浏览器
    // console.log(document.documentElement.scrollTop);
    // console.log(document.documentElement.scrollLeft);

    // 3.混杂(怪异)模式下浏览器
    // console.log(document.body.scrollTop);
    // console.log(document.body.scrollLeft);

    let {x, y} = getPageScroll();
    console.log(x, y);

    function getPageScroll() {
        let x, y;
        // IE9以及IE9以上的浏览器
        if(window.pageXOffset){
            x = window.pageXOffset;
            y = window.pageYOffset;
            // 标准模式下浏览器
        }else if(document.compatMode === "BackCompat"){
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }else{
            // 混杂(怪异)模式下浏览器
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        }
        return {
            x: x,
            y: y
        }
    }
}

函数防抖与函数防抖

函数防抖
函数节流
函数节流和函数防抖区别
上一篇 下一篇

猜你喜欢

热点阅读