BOM浏览器对像模型

BOM

浏览器对像模型 (Browser Object Model (BOM))

js : ECMAScript + BOM + DOM

BOM :js 赋予我们操控浏览器的能力：打开新窗口、赋值、粘贴、上下一页、获取url、页面带数据跳转、页面滚动、获取屏幕的尺寸、获取鼠标的坐标等

windows对象{
属性

​ 方法

​ 子对象

​ 事件

}

注意事项：

• 定义在全局的环境下的变量都会成为window的对象的属性
• 把变量定义在函数体内，可以有效的减少全局变量下的变量冲突，避免污染全局变量
• window对象可以在代码中省略，如window.alter() 写策成alter()
• 在函数内部不用var 声明的变量会成为全局变量，即window对象的属性
• 通过 var 在全局作用域下的声明的变量用delet无法删除

解决方法：

• 自调用，避免污染全局变量

  (function () {
  		//自调用函数，变量都会被垃圾回收机制回收
  	})();
  

• window.onload 事件。文档流加载完成时再执行的代码事件

//写在全局作用域下的变量，都是默认挂在window下面作为属性的，window平时都是默认不写

window属性

浏览器窗口尺寸：

• window.innerWidth / window.innerHeight（很常用） 浏览器窗口可视区
• outerWidth / Height 整个浏览器的尺寸

滚动相关

• scrollX / Y 已滚动的距离 （可视区距离文档顶部的距离）以文档document为参考标准的。

  • 动态获取当前滚动距离

  //滚动事件
  window.onscroll = function(){
      var scrollTop  = window.scrollY;  
      //获取当前滚动距离事件
  }
  

应用：缓慢回顶部。

瞬间回到顶部。

//按钮goback点击时回到顶部
goback.onclick = function() {
    //点击快速的回到顶部
    window.scrollTo(0,0);//参数一：水平方向的滚动距离；参数二：垂直方向滚动到哪里,参考线是0所在水平线
}

缓慢回顶部

1. 动态获取滚动距离 window.onscroll事件 + window.scrollY方法实现。

2. 开启一个定时器控制步长

    //开启定时器控制步长：越来越小
    var num = 180;
    var timerid = setInterval(function() {
   	 num -= 5;
    }, 500);
   

3. 绑定按钮事件

   1. 开始一个定时器，让scrollY 不断自减，并设置 window.scrollTo(0,scrollTop), 直到 scrollTop <= 0 关闭定时器。

window 的方法

滚动相关

• scrollTo(x ,y) 滚动到位置 以0所在水平线参考

  • 应用于开发中的跳楼功能 （类似锚点的功能，我的博客中有源码）

  用到的知识点：offset 家族

属性	描述
offsetWidth	获取盒子的宽度
offsetHeight	获取盒子的高度
offsetLeft	距离有相对定位的父节点的距离 left，最远能找到body
offsetTop	获取盒子距离有相对定位的父节点的距离 top
offsetParent	获取盒子距离有相对定位的父节点,如果没有就是body节点

​ 给个绑定事件，设置 window.scrollTo(0, gotop.offsetTop); 即可，想看更完美点的案例有一篇专题博文，附源码。

• scrollBy(xnum, ynum) 当前位置为基准，支持负数 （很少会用到）

系统对话框

对话框	描述	其他
alert(msg)	弹出对话框	会阻塞下面代码的执行
confirm(msg)	弹出警告框 确定-返回true 取消发回false	阻塞下面代码
prompt(msg,default)	弹出输入框 返回布尔值	阻塞下面代码
open(url,[name,options])	新窗口打开url地址，方括号选填，option控制窗口的大小。	用于跳转界面时与 a 标签相同，其主要用于传递数据
close（）	只能关闭open() 打开的窗口
print()	调用打印功能，	一般后台管理系统用。前端做：找到打印机对应的接口调用即可（即可）

案例：商品列表页实现跳转

需求：点击列表页的内容，实现页面跳转到详情页，共用一个详情页

列表页，渲染数据 （html / css /假数据准备好)

• 给每一个商品绑定点击事件
  • 页面跳转：window.open（）并实现带参数过去
    • window.open(‘url ?’ + 参数 )
• 来到详情页，接收道数据
  • 获取url，进行数据的提取 location。search
    • 获取到的数据是字符串 - -> 转成对象
    • encodeURI（） 转码 url中有中文的话会被转码，因此需要做解码处理
    • decodeURI（） 解码
  • 渲染到详情页，就可以实现详情页的共享

window子对象

• document ：DOM
• location 重点
  • 获取和设置url的对象
  • url组成：
    • 协议 http:// (可以省略) ;https://
    • 子域名 www
    • 主域名 baidu.com
    • 目录 端口后到？之间。
    • 端口号 :连接的，默认80可以省略
    • 参数 问号?后 #号前的数据 ,参数与参数之间用“&”作为分隔符
    • 哈希值（锚部分） #后的数据，单页面程序 app开发 路由
  • 属性
    • hash 返回从 # 号开始的 url (锚) 也就是 哈希值
    • href 获取完整的url
    • search 返回从 ？ 开始的url （查询部分）
• screen
  • screenX/screenY 光标指针相对于电脑屏幕的水平/垂直坐标。 距离屏幕记录
• **history ** 历史对象，包含窗口的浏览历史，可以实现后退
  • back() 加载 history 列表中的前一个 URL
  • forward() 加载 history 列表中的下一个 URL。
  • go() 加载 history 列表中的某个具体页面，支持负数。
• navigator
• 事件
  • onload: 当文档加载完后再执行代码(也可以用在图片的加载里面)
  • onscroll:滚动滑轮的时候会触发
    ory 列表中的前一个 URL
  • forward() 加载 history 列表中的下一个 URL。
  • go() 加载 history 列表中的某个具体页面，支持负数。
• navigator
• 事件
  • onload: 当文档加载完后再执行代码(也可以用在图片的加载里面)
  • onscroll:滚动滑轮的时候会触发
  • onresize : 窗口大小发生改变的时候触发