BOM的概念以及相关操作

知道JavaScript的小伙伴们肯定都听过BOM吧,那么BOM到底是什么呢?有哪些作用?让我们一起来了解一下吧。

一. BOM的概述

BOMBrowser Object Model),浏览器对象模型。其实就是操作浏览器的一些能力。

那么我们可以操作哪些内容?像获取一些浏览器的相关信息(窗口的大小)、操作浏览器进行页面跳转、获取当前浏览器地址栏的信息、操作浏览器的滚动条、获取 浏览器的信息(浏览器的版本)、让浏览器出现一个弹出框等等。

BOM 的核心就是 window 对象 ,而 window 是浏览器内置的一个对象,里面包含着操作浏览器的方法。那么我们该如何操作呢?

二. BOM的相关操作

1.浏览器的弹出层

(1)alert是在浏览器弹出一个提示框,这个弹出层是一个提示内容框,只有一个确定按钮,点击确定按钮以后,这个提示框就消失了。

示例:

(2)confirm是在浏览器弹出一个询问框,这个弹出层有一个输入框和两个按钮 ,当你点击取消的时候,得到的是 null ,当你点击确定的时候得到的就是你输入的内容。

示例:

(3)prompt是在浏览器弹出一个输入框,这个弹出层有一个询问信息和两个按钮当你点击确定的时候,就会得到true当你点击取消的时候,就会得到false

示例:

 2.浏览器的地址信息

 (1)在 window 中有一个对象叫做 location,就是专门用来存储浏览器的地址栏内的信息的。

示例:

(2)location有个href属性用来控制浏览器地址栏的内容。

示例:

取值:

赋值:会直接打开百度页面

(3)location有个reload(true)方法, 刷新页面,如果参数为true,通过缓存刷新。注意:不要写在全局,不然浏览器就会一直处在刷新状态。

示例:

3.浏览器的历史记录

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScripthistory对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能。

(1)history.go() 函数 ,前进或后退指定的页面数(负数后退,正数前进)。

示例:

(2)history.back() 函数 -- 后退一页;history.forward() 函数 -- 前进一页。

(3)history.length 属性 -- history对象中缓存了多少个URL。

示例:

 4.浏览器的版本信息(了解)

(1)navigator.userAgent 是获取的浏览器的整体信息。

示例:

(2)navigator.appName 获取的是浏览器的名称。

示例:

       

(3)navigator.appVersion 获取的是浏览器的版本号。

示例:

(4)navigator.platform  获取到的是当前计算机的操作系统。

示例:

     

5.window的事件

(1)onload事件:页面内容加载完成后触发。

示例:

(2)onscroll事件:拖动浏览器的滚动条触发此事件。

示例:

        

(3)onresize事件:浏览器窗口缩放所触发此事件。

示例:

 

今天就分享这么多哦!【逆战】

原文地址:https://www.cnblogs.com/wangyan0926/p/12441439.html