js第12课——BOM模型以及地址栏相关的方法_前端bom操作隐藏浏览器-CSDN博客

本文链接：https://blog.csdn.net/qq_42012745/article/details/121530309

BOM 浏览器对象模型

1.浏览器窗口的宽和高
    innerWidth     innerHight 
        视口的宽和高
2.浏览器的相关信息
    window.navigator 
    需要了解：
        appname:"Netscape"
        appVersion:浏览器版本
        platform：系统的版本

浏览器地址栏

1.打开一个页面  window.open();
例：    var btnEle = document.querySelector("button") ; 
        btnEle.onclick = function(){
            window.open(./a.html);  //打开同级目录下的a.html文件
            //window.open("http://www.baidu.com");    //打开网页
        }

2.关闭页面      window.close();
例：    var btnEle = document.querySelector("button") ; 
        btnEle.onclick = function(){
            window.close();         //关闭当前网页
        }

3.跳转一个页面/获取一个网页地址  window.location.href
例1：跳转    var btnEle = document.querySelector("button") ;
            btnEle.onclick = function (){
                window.location.href = "./a.html" ; //跳转到同级目录下a.html文件
                //window.location.href = "http://www.baidu.com"   //跳转到百度网页
            }
例2：获取    var btnEle = document.querySelector("button") ;
            btnEle.onclick = function (){
                var res = window.location.href ;//获取当前页面地址栏的地址
                console.log(res);               //打印这个地址
            }

4.刷新本页面    window.location.reload();
例：    var btnEle = document.querySelector("button");
        btnEle.onclick = function (){
            window.location.reload();           //点击按钮重新加载本页面
        }

5.获取地址或者设置地址栏的哈希值(#以及后面的内容)
    a.获取地址栏的哈希值
    例：    var btnEle = document.querySelector("button");
            btnEle.onclick = function () {
                console.log(window.location.hash);    //获取哈希值并将其打印出来
            }
    b.设置地址栏的哈希值
    例：    var btnEle = document.querySelector("button");
            btnEle.onclick = function () {
                window.location.hash = "#123" ; 
            }
运用：hash参数通过地址栏携带参数，同时可以设置#后面内容。
    1.不跳转页面也可以进行页面之间的切换
    2.不跳转切换页面间的应用    spa（single page application）
 例：
    <body>
        <p>起始页</p>
        <button>第一页</button>
        <button>第二页</button>
        <script>
            var pageEle = document.querySelector("p");
            var btnEle1 = document.querySelectorAll("button")[0];
            var btnEle2 = document.querySelectorAll("button")[1];
            btnEle1.onclick = function (){
                window.location.hash = "page1" ;
                renderDom();
            }
            btnEle2.onclick = function (){
                window.location.hash = "page2" ;
                renderDom();
            }
            function renderDom(){
                // console.log(window.location.hash);
                var hashStr = window.location.hash ; 
                console.log(hashStr);
                switch(hashStr){
                    case "#page1" 
                        :pageEle.innerHTML = "<h1>我是第一页</h1>"
                    break;
                    case  "#page2"
                        :pageEle.innerHTML = "<h1>我是第二页</h1>"
                    break;
                    default
                        ://window.alert("输入错误");
                    break;
                }
            }
        </script>
    </body>

6.search 参数  获取或者设置？后面的内容（这些内容以键值对的形式出现，键名=键值，键值对之间用&符号连接）
    a.获取?后面的键值对参数
    例:  <button>点击获取search值</button>
         btnEle.onclick = function(){
             var arg = window.location.search ; 
             console.log( arg );
         }   
    b.设置?后面的键值对参数
    例： <button>点击获取search值</button>
         btnEle.onclick = function(){
             window.location.search = "name=liSi" ; 
         }
     注： ?后面的参数叫做queryString(请求参数或查询参数)
  书写规则:     ?键名1=键值1&键名2=键值2&键名3=键值3    -----注意，这里的键名和键值都不需要加""
作用：search用于跨页面传参数，获取参数然后解析参数

例1：解析获取到的search参数
    str = "?name=ZhangSan&age=20&height=178cm" ;
    function formatSearch ( str ) {
        str = str.substr(1);
        var arr = str.split("&") ;
        var obj = {} ;
        arr.forEach(function(item){
            var newArr = item.split("=") ; 
            obj[newArr[0]] = newArr[1] ;
        });
        return obj ;
    }
    console.log( formatSearch( str ) );    
    最后打印的结果为{name:'ZhangSan',age:20,height:'178cm'}

例2：将对象类型的键值对拼成一个search字符串
    function reformSearch ( obj ) {
        var newArr = [] ;
        for ( var key in obj ){
            var str = key + '=' + obj[key] ;
            newArr.push(str);
        }
        return '?'+newArr.join("&");
    }
    var obj = {name:'ZhangSan',age:20,height:'178cm'} ; 
    console.log(reformSearch(obj));                     //打印结果为?name=ZhangSan&age=20&height=178cm

操作地址栏的历史记录

window.history.forward();//前进
window.history.back();  //后退

window.history.go();//  1.0代表本页面
                    //  2.正整数代表前进多少页面
                    //  3.负整数代表后退多少页面
---注---       不管是前进还是后退多少页面，前提是要有这些历史记录

浏览器事件

    预定义和浏览器相关的时间
1.onload：优先加载完html和资源后会执行这个事件
例：    window.onload = function () {
            console.log(1111);
        }

2.onresize :浏览器视口发生变化的时候触发
window.onresize = function () {
    console.log(1111);
}
onresize        可以实现自适应
rem：根字体的大小  默认根字体大小16px
动态修改根字体大小：
    window.onresize = function (){
        var w = window.innerWidth;
        document.documentElement.style.fontSize = `${w/10}px` ;
    }
    --注--  documentElement  连写科表示为HTML根元素

3.onscroll  滚动事件
window.onscroll = function () {
    console.log(11111);
}
--注--      只有存在滚动条时，才会触发滚动事件

1.获取滚动条的卷去高度
2.设置卷去高度
    document.documentElement.scrollTop
scrollTop使用注意事项：
    a.在chrome浏览器下：
        如果有文档声明，通过document.documentElement.scrollTop设置或者获取卷去高度
        如果没有文档声明，需要用document.body.scrollTop设置或者获取卷去高度
    b.在ie模式下：
        如果没有文档声明，需要用document.body.scrollTop和document.documentElement.scrollTop都可以设置或获取高度
        如果有文档声明，只有document.documentElement.scrollTop能获取，document.body.scrollTop不能获取

同步与异步

同步代码和异步代码
    异步代码会在异步队列里执行，异步队列一定在同步之后

定时器里this的指向

例：    var obj = {
                    name:'ZhangSan',
                    age:20,
                    fn:function(){
                        console.log(this);          //打印的结果为这个对象obj
                        setTimeout(function(){
                            console.log(this);      //打印的结果为window
                        },1000);
                    }
                }
    --注--      定时器里的this是指向window

事件里的this

例：    var divEle = document.querySelector(".box");
        divEle.onclick = function () {
            console.log(this);      //指向这个元素
            console.log(divEle);    //这个元素
        }