BOM简介——JS

_洋

已于 2022-05-01 16:32:29 修改

阅读量535

点赞数

分类专栏： JavaScript 文章标签： js

于 2022-04-08 19:38:41 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124043067

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

文章目录

BOM——浏览器对象模型

作用

BOM可以使我们通过JS来操作浏览器

BOM对象

在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象：

window代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator-代表的当前浏览器的信息.,通过该对象可以来识别不同的浏览器
Location-代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页而且该操作只在当次访问时有效
screen代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

（1）Navigator

Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
但是由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了

userAgent

—般我们只会使用Navigator的userAgent属性来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent。

    <script>
        window.onload =function(){
           alert(navigator.userAgent);
        }
    </script>

输出：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36

判断是什么浏览器

在IE11中已经将微软和工E相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了。

<script>
        window.onload =function(){
           var ua = navigator.userAgent;
           if(/firefox/i.test(ua)){
               alert("火狐浏览器");
           }else if(/chrome/i.test(ua)){
               alert("Chrome浏览器");
           }else if(/MSIE/i.test(ua)){
               alert("IE浏览器");
           }
        }
 </script>

问题：IE11中没有 MSIE 字样。
所以我们去寻找IE中有其他浏览器中没有的对象去判断：如ActiveXobject

    <script>
        window.onload =function(){
           var ua = navigator.userAgent;
           if(/firefox/i.test(ua)){
               alert("火狐浏览器");
           }else if(/chrome/i.test(ua)){
               alert("Chrome浏览器");
           }else if("ActiveXObject" in window){
               alert("IE浏览器");
           }
        }
    </script>

（2）History

可以用来操作向前向后翻页

属性：

length属性，可以获取到当前访问的链接（网页）的数量。

方法

back() 返回到上一个页面，和浏览器的回退按钮一样。
forward() 课题跳转到下一个页面，和浏览器的前进按钮一样。
go() 跳转到某一个指定的页面。
它需要一个整数作为参数
1:表示向前跳转—个页面
2:表示向前跳转两个页面
-2:表示向后跳转两个页面

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload =function(){
        // alert("访问了"+history.length+"个页面");
        var btn =document.getElementById("btn");
        btn.onclick=function(){
            // 回退到上一个页面
            history.back();
        }
        var btn2 =document.getElementById("btn2");
        btn2.onclick=function(){
            // 回退到上一个页面
            history.go(-2);
        }
        }
    </script>
   
</head>
<body>
  <h1>History</h1>
  <button id="btn">点我回退</button>
   <button id="btn2">点我回退2个页面</button>
</body>
</html>

（3）Location

直接打印 location 获取浏览器地址栏信息

<script>
      window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
          alert(location);
        };
      };
    </script>

修改location的值可以跳转到对应的页面
可以使用绝对路径也可以使用相对路径。

   <script>
      window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
        //   location = "https://www.baidu.com/";
        location ="target.html";
        };
        
      };
    </script>

即，如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径,并且会生成相应的历史记录

方法：assign():加载新的文档
用来跳转到新的页面，和直接修改location的效果一样。

 <script>
      window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
        // location ="target.html";
         location.assign("target.html");
        };
        
      };
    </script>

方法：reload() 重新加载当前页面——刷新
可以有参数：reload(true)：代表强制清空缓存，书刷新页面。
强制清空缓存的作用：如果不是强制清空缓存，输入框的内容在刷新后仍然存在，强制清空缓存将输入框中缓存的内容也删除掉。
方法：replace() 用一个新的页面替换当前页面，即跳转页面。但是他不会生成历史记录，不能使用回退按钮。

（4）window

方法：
在这里插入图片描述

循环定时器

setInterval() ：按时调用函数
eg：实现数字的自动切换
JS的程序的执行速度是非常非常快的，如果希望一段程序，可以每间隔一段时间执行一次（循环执行），可以使用定时调用函数。

参数：

回调函数,该函数会每隔一段时间被调用一次
每次调用间隔的时间，单位是毫秒
setInterval()的返回值：返回一个Number类型的数据这个数字用来作为定时器的唯一标识。

clearInterval()：关闭定时器，参数：是定时器的标识。
clearInterval()可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器如果参数不是一个有效的标识，则什么也不做。
eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function(){
            var count = document.getElementById("count");
            var num = 1;
            var timer= setInterval(function(){
                count.innerHTML = ++num;
                if(num==10)
                clearInterval(timer);
            }, 100);
            // alert(timer);
            
        }
    </script>
</head>
<body>
    <h1 id="count">1</h1>
</body>
</html>

延时定时器

setTimeout延时调用：一个函数不马上执行，隔一段时间才执行，执行且只执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var num =1;
        // 定时调用：每隔一段时间执行一次，调用多次
        setInterval(function(){
            alert(num++);
        },3000);
        // 延时调用：一个函数不马上执行，隔一段时间才执行，执行且只执行一次
        var timer =setTimeout(function(){
            alert(num++);
        },3000);
        clearTimeout(timer);//关闭延时调用
    </script>
</head>
<body>
    
</body>
</html>

_洋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM简介——JS

文章目录BOM——浏览器对象模型作用BOM对象BOM——浏览器对象模型作用BOM可以使我们通过JS来操作浏览器BOM对象在BOM中为我们提供了一组对象，用来完成对浏览器的操作BOM对象：window代表的是整个浏览器的窗口，同时window也是网页中的全局对象Navigator-代表的当前浏览器的信息.,通过该对象可以来识别不同的浏览器Location-代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面History代表浏览器的历史记录，可以通过
复制链接

扫一扫

专栏目录