window之bom操作

最新推荐文章于 2021-05-17 19:18:24 发布

guangbing8877

最新推荐文章于 2021-05-17 19:18:24 发布

阅读量465

点赞数

分类专栏：初级js部分

本文链接：https://blog.csdn.net/guangbing8877/article/details/53148905

版权

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

3 篇文章 0 订阅

订阅专栏

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请求中，请求头中所带的信息。
如下图（模拟的是手机端）所示：



6.history前进后退按钮。


 
 
  
  •后退
 
 

 
 
  
  –history.back()
 
 

 
 
  
  –history.go(-1)
 
 

 
 
  
  •前进
 
 

 
 
  
  –history.forward()
 
 

 
 
  
  –history.go(1)
 
 
类似于浏览器左上角的  <---,和---->箭头。

7.Screen
screen.width  screen.height，分别代表你电脑屏幕的单位（也就是分辨率的横向，和纵向值）
screen.availWidth,screen.availHeight.宽度和上面的一样，高度是除了底部任务栏高度之外的高度。‘

guangbing8877

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window之bom操作

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

扫一扫