BOM（浏览器对象模型）

Posted 2020-11-07 小白坤

一、BOM（浏览器对象模型）

 1.screen对象。

　　　　　　　console.log(screen);
            console.log(window.screen);
            console.log(screen.width);
            console.log(screen.height);
            console.log(screen.availHeight);//可用高度=screen-height-底部任务栏高度
            console.log(screen.availWidth);//可用宽度

2.location对象。

　　　　　　　console.log(location);
            console.log(location.href);//完整的URL路径
            console.log(location.protocol);//协议名
            console.log(location.hostname);//主机名
            console.log(location.port);//端口号
            console.log(location.host);//主机名+端口号
            console.log(location.pathname);//文件路径
            console.log(location.search);//从？开始的参数部分
            console.log(location.hash);//从#开始的锚点部分

3.使用location进行页面跳转。

　　　　　　　function gotoBaidu(){//1
                location="http://www.baidu.com";
//                window.location.href="http://www.baidu.com";
            }

4.跳转页面，加载新页面以后，可以点击回退按钮返回。

　　　　　　　function gotoBaiduByAssign(){//2
                location.assign("http://www.baidu.com");
            }

5.跳转页面，加载新页面以后，没有回退按钮，无法返回。

　　　　　　　function gotoBaiduByReplace(){//3
                location.replace("http://www.baidu.com");
            }

6.刷新当前页面。

①location.reload();刷新页面，如果本地有缓存，将从缓存中读取，相当于F5。
②location.reload(true);强制刷新，无论是否有缓存，都将请求后台加载最新数据，相当于Ctrl+F5。

　　　　　　　function reloadPage(){//4
                location.reload();//刷新
                location.reload(true);//重新加载页面，强制刷新
            }

7.history。

　　　　　　　console.log(history);
            console.log(history.length);//用于记录当前页面跳转的历史页面个数

8.点击去前一页，相当于浏览器的前进按钮，点击去后一页，相当于浏览器的后退按钮。

　　　　　　　function forward(){
                location.forward();
            }
            function back(){
                location.back(;)
            }

9.表示跳转到浏览历史的任意页面。

  +1前面一页，相当于location.forward();
  -1后面一页，相当于location.back();
  0当前页，刷新页面history.go(2);//第二页0刷新当前页

　　　　　　　function go(){
                history.go(2);//第二页0刷新当前页
            }

10. navigator了解，返回关于浏览器的的各种信息。

　　　　　　　console.log(navigator);
            //检测浏览器安装的所有插件
            for(var i=0;i<navigator.plugins.length;i++){
                console.log(navigator.plugins[i].name);
            }

二、window对象的常用方法

1.prompt():弹窗输入
 alert():弹窗输出
2.confirm("");带确定、取消的提示框，分别返回true、false
3.close();关闭当前浏览器窗口。
4.open();打开一个新窗口
 参数一：新窗口的地址
 参数二：新窗口的名字
 参数三：新窗口的各种配置属性
 width=600px,height=200px,top=10px;left=20px
5.setTimeout();延时器，表示延时多少ms执行一个函数。
 参数一：可以传入匿名函数，也可以传入函数名。
 参数二：延时毫秒数
 参数三~参数n：传给回调函数的参数。
 setTimeout(function(num1,num2){},2000,"haha",123);
6.setInterval();定时器，表示每隔多少毫秒执行一遍，其他方法与setTimeout()完全相同。
7.clearInterval和clearTimeout():分别清楚定时器，延时器。
 声明定时时，可以接受返回的ID，并将ID传给clearInterval即可清除。

//定时器
            var num=0;
            var intervalID=setInterval(function(){
                num++;
                console.log(num);
            },1000);
            setTimeout(function(){
                clearInterval(intervalID);
            },5000);
            var num=0,sum=0;
            var intervalID=setInterval(function(){
                num++;
                console.log(num);
                if(num>9){
                    clearInterval(intervalID);
                }
            });