window之bom操作

最新推荐文章于 2023-11-29 12:38:20 发布

原创最新推荐文章于 2023-11-29 12:38:20 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

初级js部分专栏收录该内容

3 篇文章

订阅专栏

本文介绍了浏览器对象模型(BOM)中的关键方法，如 window 对象的 open 方法用于打开新窗口，setTimeout 和 setInterval 实现定时操作，location 对象用于页面跳转及重载，userAgent 获取客户端信息，history 对象实现页面前进后退，Screen 对象获取屏幕尺寸。

window bom 指的是浏览器对象模型，在js中window对象是JavaScript中的顶级对象。所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法。window对象下的属性和方法调用的时候可以省略window。比如：window.alert('aaaa')，经常写成，alert(); var window.arg1=.....,可以写成，var arg1;下面介绍几种bom方法：

1.open

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" id="btn" value="open">
    <input type="button" id="btn1" value="close">
    <script>

        var btn = document.getElementById("btn");
        btn.onclick = function () {
		
         win = open("06-onload.html","_blank","width=200,height=200");

        };

        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            //关闭当前浏览器窗口
            //window.close();

            //关闭指定窗口，
               win.close();
        }
    </script>
</body>
</html>

直接运行代码就好了，简单易懂，关于打开窗口的大小，位置，滚动与否，本文不做详细介绍，有需要的，可以查阅资料。本文只做总结。

2.setTimeout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="setTimeout">
<input type="button" id="btn2" value="clearTimeout">
<script>
    var btn = document.getElementById("btn");
    var timerId;
    btn.onclick = function () {
        //setTimeout 到达指定时间后执行，只执行一次
        timerId = setTimeout(function () {
            console.log("honghong");
        }, 3000);//3秒后执行

    };
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function () {
        //清楚定时器
        clearTimeout(timerId);
    };

</script>
</body>
</html>

需要注意的是，如果再点击setTimeout按钮之后三秒内，点击了，clearTimeout,那么控制器就不会输出信息啦。
3.setInterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="setInterval">
<input type="button" id="btn2" value="clearInterval">
<script>
    var btn = document.getElementById("btn");
     var btn2 = document.getElementById("btn2");
    //开启定时器    var timeId;
    btn.onclick = function () {    
            timerId = setInterval(function () {
                console.log("该起床了");
            },2000);
     	
    };
    //销毁定时器
    btn2.onclick = function () {
        clearInterval(timerId);
    };
</script>
</body>
</html>

需要注意的是，在执行上面代码中，如果对btn进行点击多次，那么控制台打印‘该起床了’的速度越来越快，那么此时，原因是，开启了多个定时器。

此时需要改进的方法是，

    var timerId;

    var flag = 1;
    btn.onclick = function () {
//        if(timerId) {
//            return;
//        }
        if (flag === 1) {
            timerId = setInterval(function () {
                console.log("该起床了");
            },2000);
        }
        flag = 2;
		
    };

两种方法：1，判断timerId是否存在，若存在，那么点击事件不再生效。2.设置一个flag,第一次运行setInterval后面，改变标志位的值。

setInterval 和setTimeout都属于异步操作。setInterval 通常应用于，手机验证码倒计时，注册某些网站时候，阅读须知的倒计时。
4.location location相当于浏览器地址栏通过location的 hash ,serach 等属性，可以将url解析成独立的片段

–href 重定向。等于改变了浏览器地址栏中的url,所以页面将进行重新跳转

–location.reload() 默认无参数重新加载，将会从缓存中读取数据。如果参数为true,表示强制刷新，从服务器上获取新的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="跳转">

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      // location.href = "http:www.baidu.com";

      // location.reload(true);


        console.log(window.location.hash);
        console.log(window.location.host);
        console.log(window.location.hostname);
        console.log(window.location.pathname);
        console.log(window.location.port);
        console.log(window.location.protocol);
        console.log(window.location.search);

    };
</script>
</body>
</html>

需要注意的是，在运行上述代码时候，要放在服务器环境中运行，才能看到更好的效果。

5.userAgent

主要是在http请求中，请求头中所带的信息。

如下图（模拟的是手机端）所示：