Javascript Bom概念及常用api

BOM简介

JavaScript的实现包括以下3个部分：

1.核心（ECMAScript）：描述了JS的语法和基本对象。

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

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

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

BOM对象

BOM对象分为：

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

document 对象，文档对象；

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

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

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

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

window 对象

弹框类：

alert('提示信息')

confirm("确认信息")

prompt("弹出输入框")

打开窗口(4种)：

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

html:

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

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

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

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

html:

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

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

html:

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

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

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

关闭窗口

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

定时器/清除定时器

一次性定时器：setTimeout(函数，时间)

周期性定时器：setInterval(函数，时间)

清除定时器：clearTimeout/clearInterval(定时器名称)

关于异步、同步执行顺序，强烈推荐这篇文章
一篇文章彻底搞懂异步，同步，setTimeout，Promise，async

location对象

保存当前窗口正在打开的url地址的对象。

属性

location:http://aaaa.cn:8080/orders/orderDetails/index.html?username=nan&kw=楠

用以上域名来做演示：

location.protocal: 协议名 （http）

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

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

location.port: 端口号 （8080）

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

location.search: ?及其之后的查询字符串 （?username=nan&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)

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');    
}

history对象

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

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

后退：history.go(-1);

刷新：history.go(0);

screen对象

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

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

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