【总结】JavaScript常用BOM操作API

最新推荐文章于 2023-12-01 15:55:30 发布

seven豆

最新推荐文章于 2023-12-01 15:55:30 发布

阅读量658

点赞数

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

原文链接：https://www.cnblogs.com/cxf1214/p/11403067.html

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript常用BOM操作API总结

1.BOM简介
2.BOM对象
3. 浏览器窗口尺寸相关
4.滚动距离
5.滚动事件
6. load事件

1.BOM简介

BOM 是 Browser Object Model，浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。

JavaScript的实现包括以下3个部分：
1.核心（ECMAScript）：描述了JS的语法和基本对象。

2.文档对象模型（DOM）：处理网页内容的方法和接口

3.浏览器对象模型（BOM）：与浏览器交互的方法和接口

2.BOM对象

BOM对象分为：

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；

location 对象，浏览器当前URL信息；

navigator 对象，浏览器本身信息；

screen 对象，客户端屏幕信息，可获取用户设备的种类

history 对象，浏览器访问历史信息

2.1 window 对象

2.1.1弹框类：

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")

2.1.2打开窗口(4种)：

1.在当前窗口打开，可后退

html: <a href="url" target="_self">

js: open("url","_self ")

2.在当前窗口打开，禁止后退

js: location.replace("新url") ,用新的url代替history中当前地址

3.在新窗口打开，可打开多个

html: <a href="url" target="_blank">

js: open("url","_blank ")

4.在新窗口打开，只能打开一个

html: <a href="url" target="自定义的窗口名">

js:open("url","自定义的窗口名")

原理: target属性其实是为新窗口指定内存中唯一的窗口名,浏览器规定，同一时刻，同名窗口只能打开一个,后打开的会覆盖先打开的。

预定义name:
_self 自动使用当前窗口的name
_blank 不指定窗口名, 每打开一个窗口，浏览器会自动随机生成内部窗口名

2.1.3 关闭窗口

close()
关闭当前的网页,存在兼容性问题。FF：禁止设置关闭浏览器的代码，Chrome：默认直接关闭，IE：询问用户。

2.2 location对象

保存的是浏览器地址栏相关信息：获取当前窗口地址，可以改变当前窗口的地址

href属性保存了当前窗口的地址（完整的地址）
获取href属性，获取了当前地址改变了href属性，跳转页面
reload() 方法刷新

location:http://aa.cn:8080/test/index.html?username=shuai&kw=帅

用以上域名来做演示：

location.protocal: 协议名（http）

location.host: 主机名+端口号（aa.cn:8080）

location.hostname: 主机名（aa.cn）

location.port: 端口号（8080）

location.pathname: 相对路径（ test/index.html）

location.search: ?及其之后的查询字符串（?username=shuai&kw=帅）

location.hash: #锚点名

用法

1.在当前窗口打开，可后退:

location.href="url";
location.assign("url"); //assign表示赋值
location="url"; //本质还是改href属性

2.在当前窗口打开，禁止后退:

// 打开新url,并用新url替换history中当前旧url,实现禁止后退
location.replace("新url")

3.刷新:

普通刷新: 优先从缓存中获取资源，缓存没有或过期，才去服务器找。

F5

history.go(0)

location.reload()

强制刷新: 无论有没有缓存，都强制从服务器获取新资源

location.reload(true)

2.3. navigator对象

navigator对象包含了所有浏览器的配置信息。

navigator.platform：操作系统类型；

navigator.userAgent：浏览器设定的User-Agent字符串。

navigator.appName：浏览器名称；

navigator.appVersion：浏览器版本；

navigator.language：浏览器设置的语言；

navigator.cookieEnabled: 判断cookie是否启用(true是启用了)

navigator.plugins — 是个集合判断是否安装了指定插件(plugin)

如：判断用户是否是IE浏览器

if(window.navigator.userAgent.indexOf('MSIE')!=-1){
  alert('是IE');
}else{        
  alert('不是IE');    
}

2.4 history对象

history对象保存当前窗口打开后，成功访问过的url的历史记录栈，内容不对开发人员开放，无法修改，只能进行三个操作：

前进：history.go(1); //前进一次

后退：history.go(-1);

刷新：history.go(0);

2.5 screen对象

screen 对象包含有关用户屏幕的信息。

screen.availWidth 返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight 返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

// 获取屏幕的宽度和高度之和
document.write(screen.availHeight+screen.availWidth);

3. 浏览器窗口尺寸相关

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度包含滚动条
可视区宽高：
document.documentElement.clientWidth 可视区宽度不包含滚动条
document.documentElement.clientHeight 可视区高度不包含滚动条