BOM之API

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

window对象包括六个子对象：document，frames，history，location，navigator，screen

BOM对象分为：

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

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

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

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

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

window对象窗口处理

document对象窗口中加载的文档处理（该对象的属性和方法都很少用或不用！）

frames对象窗口的多个框架布局（该对象也不用！）

history对象处理浏览器的浏览历史

location对象处理当前文档的URL

navigator对象提供浏览器的相关信息

screen对象提供显示器的信息（窗口大小，分辨率）

BOM中常用的API

navigator：window 中封装浏览器属性和配置信息的对象
cookieEnabled：识别浏览器是否启用 cookie，返回值 true/false
userAgent：保存了浏览器名称和版本的字符串
plugins：保存浏览器中所有插件信息的集合，每个 plugin 对象的 name 属性保存了插件的名称
screen：保存显示屏信息的对象
history：保存窗口的历史记录栈
location：指代当前窗口正在访问的 url 地址对象
location.href：保存了当前窗口正在访问的 url 地址，设置 href 属性为新 url，会在当前窗口打开新 url
location.search()：获取 url 上面？后面的参数
location.reload()：刷新当前页面
location.assign(url)：设置当前窗口的新 url
location.reload(true/false):true —— 无论是否更改，都获取更新；false —— 被修改的页面，重新获 取，未被修改的页面，从缓冲获取
定时器：让程序按指定时间间隔，自动执行任务，任务是所有定时器的核心。

window对象：

弹窗

// alert('早上好')
      // confirm('确认信息')
      // prompt('弹出输入框')

打开窗口

 <!-- 打开窗口(4种) -->
   <!-- // 在当前窗口打开，可后退 -->
  <!-- <a  id="box1" href="./hash.html" target="_self">链接</a> -->

  <!-- 在当前窗口打开，禁止后退 -->
  js: location.replace("新url") ,用新的url代替history中当前地址

  <!-- 在新窗口打开，可打开多个 -->
  <!-- <a  id="box1" href="./hash.html" target="_blank">链接</a> -->

  <!-- 在新窗口打开，只能打开一个 -->
  <!-- <a href="./hash.html" target="hash" id="box1">链接</a> -->

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

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

关闭窗口

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

location对象

reload()方法

location.reload()： 重新载入当前文档（刷新当前页面）

window.location.reload()

href属性

返回一个完整的URL

location.href = url地址

如：window.location.href = 'http://www.baidu.com'

如：window.location.href = url.value 给到的字符串要有http://，不然会以一个字符串去拼接当前的url

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

 // location对象
      // 在当前窗口打开，可后退:
      // location.href="#"
      // location.assign("./hash.html"); //assign表示赋值
      // location="./hash.html"; //本质还是改href属性

      // 在当前窗口打开，禁止后退:
      // 打开新url,并用新url替换history中当前旧url,实现禁止后退
      // location.replace("./hash.html")

navigator对象

包含了所有浏览器的配置信息

navigator.platform：操作系统类型；

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

navigator.appName：浏览器名称；

navigator.appVersion： 浏览器版本；

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

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

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

// navigator对象
      // 判断用户是否是IE浏览器
      // if(window.navigator.userAgent.indexOf('MSIE')!=-1){
      //   alert('是IE');
      // }else{        
      //   alert('不是IE');    
      // }

 history对象

back()
history.back()：表示页面往后退一步，与单击后退按钮的执行操作一样

go()
history.go(参数number/url)：加载历史列表中的某个具体的页面。

参数为正数，如go(1)，表示页面向前走一步

参数为负数，如go(-1)，表示页面后退一步

参数为字符串，如go(url)，前往指定地址

如：window.history.go(1) //当前页面向前走一步

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

 // history对象
      // history对象保存当前窗口打开后，成功访问过的url的历史记录栈，内容不对开发人员开放，无法修改
      // 前进：
      // history.go(1); //前进一次
      // 后退：
      // history.go(-1);
      // 刷新：
      // history.go(0);

 screen对象

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

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

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

浏览器窗口尺寸相关

---

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

滚动距离

---

document.documentElement.scrollTop IE其他浏览器
document.documentElement.scrollLeft //横向
document.body.scrollTop 低版本chrome

 load事件

---

网页加载事件：等待网页html/css资源加载完毕后触发

注意：

一个html文件中只能出现一次，如果出现多次，下面会覆盖上面的

使用场景：
如果js写在头部，应该将所有的js代码，扔进window.onload事件中，否则获取不了元素

更多详解【总结】JavaScript常用BOM操作API_bom的api有哪些-CSDN博客