浏览器对象模型BOM

最新推荐文章于 2024-04-01 13:40:45 发布

今天晚上一定要早睡

最新推荐文章于 2024-04-01 13:40:45 发布

阅读量95

点赞数

分类专栏： BOM 文章标签： bom

本文链接：https://blog.csdn.net/qq_48192192/article/details/120302507

版权

BOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

BOM

1.window简介
2.系统对话框
3.location对象
- 3.1属性
- 3.2方法
4.history对象
5.超时调用和间歇调用
- 5.1 setTimeout()超时调用
- 5.2 setInterval() 间歇调用
6.navigator对象

1.window简介

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

BOM的核心对象是window，表示浏览器的一个实例，在浏览器中window对象有双重角色，既是通过JavaScript访问浏览器窗口的一个接口，有事ECMAScript规定的Glabal对象。

1.1窗口位置

screenLeft和screenTop属性：返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)
screenX和screenY属性：返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持)
pageXOffset ：设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset ：设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
IE8及更早IE版本不支持该属性,但可以使用 “document.body.scrollLeft” 和 “document.body.scrollTop” 属性

获取滚动条距离顶部的位置

window.onscroll=function(){
if(window.pageYOffset){
    console.log(window.pageYOffset+"@1");//谷歌
    console.log(window.pageXOffset+"@1");//谷歌
}else if(document.documentElement.scrollTop){
    console.log(document.documentElement.scrollTop+"@2") //firefox
    console.log(document.documentElement.scrollLeft+"@2") //firefox
}else{
    console.log(document.body.scrollTop+"@3") //IE
    console.log(document.body.scrollLeft+"@3") //IE
}
}

兼容性设置

<script>
        if(window.screenLeft)
            console.log(window.screenLeft+','+window.screenTop+'a')
        else
            console.log(window.screenX+','+window.screenY+'b')  //兼容性
</script>

1.2窗口大小

innerWidth 页面视图区的宽度
innerHeight 页面视图区的高度
outerWidth 浏览器窗口的宽度
outerHeight 浏览器窗口的高度

所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

1.3screen对象

屏幕总宽度/高度：screen.width screen.height
可用宽度/高度： screen.availWidth screen.availHeight
颜色深度： screen.colorDepth
颜色分辨率： screen.pixelDepth

1.4导航和打开窗口

window.open()
可以导航到一个特定的URL，也可以打开一个新的浏览器窗口,该方法会返回一个指向新窗口的引用.
参数：
1）要加载的URL
2）窗口目标，框架名
_self 在当前浏览器页面打开
_parent 当前页面父页面打开
_top 当前页面顶级页面
_blank 新页面打开
3）设置各种属性的字符串（逗号分隔）
4）布尔值（新页面是否取代浏览器历史记录中当前加载页面）

<script>
var w = window.open("http://www.baidu.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400"); //（加载的地址，窗口目标，设定窗口的字符串布尔值）
</script>

window.moveTo(0,0); //设置窗口位置（多用于新建窗口）

2.系统对话框

调用系统对话框向用户显示消息。
显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。

alert()
该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息
```
 alert('hello'); //提示或者警告
```
confirm()
确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击cancel 或者关闭按钮
```
 var res=confirm('是否要进行下载'); //返回true或false
```
prompt()
会话框，提示用户输入一些文本。显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，要显示给用户的文本提示和文本输入域的默认值。如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了 Cancel或者关闭对话框该方法返回null。
```
 var p=prompt('请输入您的名字：');  //返回用户输入的内容
```

3.location对象

是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location既是window的对象也是document的对象。
用于获取或设置窗体的URL，并且可以用于解析URL。
URL：统一资源定位符，是互联网上标准资源的地址，互联网上每个文件都有一个唯一的URL，包含的信息指出文件的位置以及浏览器应该如何处理他。
protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=10#link

    console.log(window.location == document.location);//true

location ， window.location 和 document.location 操作相同

3.1属性

href 返回当前加载页面的完整URL
search 返回URL的查询字符串。这个字符串以问号开头
host 返回服务器名称和端口号
hostname 返回不带端口号的服务器名称
pathname 返回URL的目录和文件名
port 返回URL中指定的端口号

protocol 返回页面使用的协议

 console.log(location.href);  //获取当前的url
 console.log("协议",location.host);
 console.log(location.hostname);
 console.log(location.href);
 console.log(location.pathname);
 console.log(location.port);
 console.log(location.protcol);

5秒之后跳转

<div></div>
    <script>
        
        var timer=5;
        var div=document.querySelector('div');
        setInterval(function(){
            if(timer==0){
                location.href='http://www.itcast.cn';
            }else{
            div.innerHTML='您将在'+timer+'秒后跳转';
            timer--;
            }
        },1000)
    </script>

跳转页面，显示URL参数
login：

<form action="index.html">
        用户名： <input type='text' name='uname'>
        <input type="submit" value="登录">
 </form>

index:

<div></div>
    <script>
        console.log(location.search); //?uname=andy
        var params=location.search.substr(1); //uname=andy
        var arr=params.split('=');
        console.log(arr);
        var div=document.querySelector('div');
        div.innerHTML=arr[1]+'欢迎您'; //andy
    </script>

3.2方法

assign() 传递一个url参数，打开新url，并在浏览记录中生成一条记录,可以实现后退功能
replace() 参数为一个url,结果会导致浏览器位置改变，但不会在历史记录中生成新记录。
reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载

<body>
    <button id="btn1">百度一下</button>
    <button> 前进</button>
    <button >后退</button>
    <script>
        var btn1=document.getElementById('btn1');
        btn1.onclick=function(){
            location.href="http://www.baidu.com";
            window.location.href="http://www.baidu.com";
            document.location.href="http://www.baidu.com";
            location="http://www.baidu.com";
            window.location.assign("http://www.baidu.com"); //会产生历史记录
            window.location.replace("http://www.baidu.com"); //不会产生历史记录
            location.reload(true); //默认情况为false，调用缓存，true强制重新加载
        }
     </script>
</body>

以下三句话效果一样

   window.location="http://www.baidu.com";
   location.href="http://www.baidu.com"
   location.assign("http://www.baidu.com");

4.history对象

该对象保存着用户上网的历史记录。
出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

length 返回历史列表中的网址数。（IE和Opera从0开始，而Firefox、Chrome和Safari从1开始。）
back() 加载 history 列表中的前一个 URL（同go(-1)）
forward() 加载 history 列表中的下一个 URL (同go(1))
go() 加载 history 列表中的某个具体页面，负数表示向上几页跳转，正数表示下几页跳转

<body>
    <button id="btn1">百度一下</button>
    <button id="back">前进</button>
    <button id='forward'>后退</button>
    <script>
        console.log(history.length); //历史记录数
        var back=document.getElementById('back');
        var forward=document.getElementById('forward');
        back.onclick=function(){
            history.back(); //后退
            history.go(-1); //后退1
        }
        forward.onclick=function(){
            history.forward();  //前进
        }
     </script>
</body>

5.超时调用和间歇调用

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。

5.1 setTimeout()超时调用

window.setTimeout(调用函数，延迟毫秒数)

指定时间之后执行代码。window通常可以省略。
该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数：
1.要执行的代码，可以直接写要执行的函数，或者已经定义好的函数名（不需要加引号）
调用的函数也称为回调函数（callback）,需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
2.以毫秒表示的时间，可以省略，省略则默认为0，不延迟立刻执行
页面中可能会有多个定时器，可以给定时器加标识符

clearTimeout(id) 取消超时调用

一秒后调用

var id = setTimeout(function(){
alert(1000);
},1000);
console.log(id);
clearTimeout(id)	//清除

<button>点击停止定时器</button>
var btn=document.querySelector('button');
var id=function callback(){
        console.log('爆炸了');
    }
  var id1=setTimeout(callback,3000);
  btn.addEventListener('click',function(){
        clearTimeout(id);
    })

5.2 setInterval() 间歇调用

window.setInterval(调用函数，毫秒数)

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。
调用该方法也会返回一个间歇调用ID，该ID可以让用户在将来某个时刻取消间歇调用

参数：
1.要执行的代码
2.以毫秒表示的时间
clearInterval(ID); //取消间歇调用

<script>
        var id=setTimeout(function(){
        console.log('执行');
        },5000);  //超时调用 5秒后执行
        clearTimeout(id); //可以在某些时候将定时器清除
        var id1=setInterval(function(){
            console.log('执行了一次');
        },1000); //间歇调用 1秒执行一次
        clearInterval(id1);  //清除
    </script>

秒杀倒计时案例

<style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        var hour=document.querySelector('.hour');
        var minute=document.querySelector('.minute');
        var second=document.querySelector('.second');
        var inputTime=+new Date('2021-10-14 00:00:00'); //输入时间的总秒数
        countDown(); //防止一打开页面时会存在一秒的空白，先调用一次函数，在使用定时器一秒后调用函数
        function countDown(){
            var nowTime=+new Date(); //当前时间总秒数
            var times=(inputTime-nowTime)/1000; //剩余时间的秒数
            var h=parseInt(times/60/60%24); //时
            h=h<10? "0"+h :h;
            hour.innerHTML=h;
            var m=parseInt(times/60%60); //分
            m=m<10? "0"+m:m;
            minute.innerHTML=m;
            var s=parseInt(times%60);//秒
            second.innerHTML=s;
        }
        setInterval(countDown, 1000);
    </script>

停止定时器

<button class="begin">点击开始定时器</button>
    <button class="end">点击结束定时器</button>
    <script>
        var begin=document.querySelector('.begin');
        var end=document.querySelector('.end');
        var id = null; //全局变量。为对象
        begin.addEventListener('click',function(){
            id=setInterval(() => { //不能直接在这里声明id,不在全局中，下面不能使用，会报错
                console.log(111);
            }, 1000);
        })
        end.addEventListener('click',function(){
            clearInterval(id);
        })
    </script>