BOM介绍

发布时间:2024年01月04日

1、简介

BOM(Browser Object Model),全称浏览器对象模型。 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象,是用于描述这种对象与对象之间层次关系的模型,==浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。==BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象(例如screen对象、history对象等)都是该对象的子对象。

BOM 是在缺乏规范的背景下发展起来的,因此既充满乐趣又问题多多。毕竟,浏览器开发商都按照自己的意愿来为它添砖加瓦。最终,浏览器实现之间共通的部分成为了事实标准,为 Web 开发提供了浏览器间互操作的基础。HTML5 规范中有一部分涵盖了 BOM 的主要内容,因为 W3C 希望将JavaScript 在浏览器中最基础的部分标准化。

主要作用

  1. 弹出新浏览器窗口的能力;
  2. 移动、关闭和更改浏览器窗口大小的能力;
  3. 可提供WEB浏览器详细信息的导航对象;
  4. 可提供浏览器载入页面详细信息的本地对象;
  5. 可提供用户屏幕分辨率详细信息的屏幕对象;
  6. 支持Cookies;

2、BOM的组成

BOM中共有五大对象

  • Window:窗口对象
  • Navigator:浏览器对象
  • Screen:显示器屏幕对象
  • Histroy:历史记录对象
  • Location:地址栏对象

2.1 窗口对象window

BOM 的核心是 window 窗口对象对象,表示浏览器的实例。window 对象在浏览器中有两重身份,一个是ECMAScript 中的 Global 对象,另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象,都可以访问其上定义全局方法。

2.1.1 window对象特点

window对象不需要创建可以直接使用,window.方法名();,甚至可以把window直接省略方法名();

window.alert("hello window");
//等于下面的
alert("hello window");
2.1.2 window作用域

通常node环境下的全局作用域为global,浏览器的全局作用域为window,而window对象又会被复用为ECMAScript的Global对象,所以可以通过var声明的所有全局变量和函数都会变成window对象的属性和方法。比如:

<script>
    var name = 'zhangsan';
    var sayName = function () {
    console.log(this.name); //zhangsan
    }
    console.log(name);//zhangsan
    console.log(window.name); //zhangsan
    sayName();  //zhangsan
    window.sayName(); //zhangsan
</script>

上段代码我们使用var声明全局变量和全局方法,然后使用window对象调用它们,这说明我们声明的这些变量和方法全都挂载到了window对象上去了。

需要注意的是:

如果我们使用let或者const声明方法时,该方法不会挂载到window对象上去,比如下列代码会报错:

<script>
    let name1 = '张三';
    let sayName1 = function () {
        console.log(this.name); // 张三
    }
    console.log(name1);// 张三
    console.log(window.name1); // 张三
    sayName1();  // 张三
    window.sayName1(); // 错误:window.sayName1 is not a function
</script>

细心的小伙伴应该也发现了,我们声明的全局变量可以不适用window.say的形式调用,可以省略window,因为window是全局作用域,变量或方法找不到的时候自然要去window上找,所以我们挂载到window对象上的方法或变量通常可以直接调用,而不需要window.。

2.1.3 window对象常见方法
第一类:系统对话框

使用 alert()、confirm()和 prompt()方法,可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关,而且也不包含 HTML。它们的外观由操作系统或者浏览器决定,无法使用 CSS 设置。此外,这些对话框都是同步的模态对话框,即在它们显示的时候,代码会停止执行,在它们消失以后,代码才会恢复执行。

  • alert()方法

    alert()接收一个要显示给用户的字符串。

    警告框(alert)通常用于向用户显示一些他们无法控制的消息,比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

    <script>
        alert("你确定吗?");
    </script>
    

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • confirm()方法

    确认框通过调用 confirm()来显示。确认框跟警告框类似,都会向用户显示消息。但不同之处在于,确认框有两个按钮:“Cancel”(取消)和“OK”(确定)。想知道用户单击了 OK 按钮还是 Cancel 按钮,可以判断 confirm()方法的返回值:true 表示单击了 OK 按钮,false 表示单击了 Cancel 按钮。

    <script>
        var result = confirm('你确定吗?');
        if (result) {
            console.log('确定');
        }else{
            console.log('取消');
        }
    </script>
    

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    选择确定或者取消按钮会在控制台输出结果:

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • prompt()方法

    提示框,通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮,提示框还会显示一个文本框,让用户输入内容。prompt()方法接收两个参数:要显示给用户的文本,以及文本框的默认值(可以是空字符串)。

    <script>
        var result = prompt("你叫什么名字?");
        if (result) {
            console.log(result);
        }else{
            console.log('取消');
        }
    </script>
    

    往输入框输入“张三”会在控制台输出

第二类:控制浏览器窗口方法
  • open()方法

    基本语法:window.open(URL,name,specs)

    这个方法可以接收 3个参数:要加载的 URL、目标窗口、特性字符串。

    参数介绍:

    • URL:可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口。

    • name:可选。指定target属性或窗口的名称。支持以下值:

      1. _blank - URL加载到一个新的窗口。这是默认。
      2. _parent - URL加载到父框架
      3. _self - URL替换当前页面
      4. _top - URL替换任何可加载的框架集
      5. name - 窗口名称
    • specs:可选。一个逗号分隔的项目列表。支持以下值:

      参数作用
      height = pixels,width = pixels窗口的高度,宽度,最小.值为100
      left = pixels,top = pixels该窗口的左侧位置,窗口顶部的位置.仅限IE浏览器
      hannelmode = yes /no /1 /0是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
      directories = yes /no /1 /0是否添加目录按钮。默认是肯定的。仅限IE浏览器
      fullscreen = yes /no /1 /0浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器
      location = yes /no /1 /0是否显示地址字段.默认值是yes
      menubar = yes /no /1 /0是否显示菜单栏.默认值是yes
      resizable = yes /no /1 /0是否可调整窗口大小.默认值是yes
      scrollbars = yes /no /1 /0是否显示滚动条.默认值是yes
      status = yes /no /1 /0是否要添加一个状态栏.默认值是yes
      titlebar = yes /no /1 /0是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
      toolbar = yes /no /1 /0是否显示浏览器工具栏.默认值是yes
  • close()方法

    关闭浏览器窗口,谁调用就关闭谁。

    例如:

    <button id="closeWindow">关闭窗口</button>
    <script>
    	var closeWindow = document.getElementById("closeWindow");
        closeWindow.onclick = function(){
            window.close(); //关闭调用它的窗口
        }
    </script>
    
第三类:与定时器有关的方法

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

  • setTimeout()

    指定的时间后执行指定的函数
    参数1:函数对象
    参数2:时间,单位毫秒
    返回值:返回当前定时器的id

    <script>
        //第一个参数传入方法名,不带括号,第二个参数传入时间(单位毫秒)
        var id = setTimeout(fun,3000);
    	function fun(){
    		alert("hello");
    	}
    </script>
    
  • setInterval()

    每间隔指定的时间执行指定的函数
    参数1:函数对象
    参数2:时间,单位毫秒
    返回值:返回当前间隔器的id

    //间隔执行
    function testSetInterval(){
         var id = window.setInterval(function(){
              alert("间隔执行");
         },2000);  
    }
    

erval()**

每间隔指定的时间执行指定的函数
参数1:函数对象
参数2:时间,单位毫秒
返回值:返回当前间隔器的id

```javascript
//间隔执行
function testSetInterval(){
     var id = window.setInterval(function(){
          alert("间隔执行");
     },2000);  
}
```
文章来源:https://blog.csdn.net/qq_71443736/article/details/135378048
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。