什么是BOM?

123 阅读3分钟

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

BOM的属性与方法:

  1. window:浏览器实例
  2. location:获取URL与解析
  3. navigator:浏览器属性
  4. screen:当前窗口与屏幕相关信息
  5. history:浏览器URL的历史记录

1. window:浏览器实例

浏览器大小

window.outerHeight:浏览器窗口高度 window.outerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口内高度 window.innerWidth:浏览器窗口内宽度

窗口方法

  • window.open():跳转到特定页面,也可以打开新的浏览器窗口
  • window.close():关闭浏览器窗口
  • window.stop():停止页面载入
  • window.focus():将焦点设置到当前窗口 提示框方法:
  • alert():消息和按钮的警告框
  • confirm():消息和确认及取消按钮的对话框
  • prompt():用户可进行输入的对话框 窗口移方法:
  • window.moveBy(x,y):相对当前窗口的坐标,移动指定的像素
  • window.moveTo(x,y):将窗口移动到指定坐标

2. location:获取URL与解析

属性

  1. hash:utl中#后面的字符,没有则返回空串
  2. host:服务器名称和端口号
  3. hostname:域名,不带端口号
  4. href:完整url
  5. pathname:服务器下面的文件路径
  6. port:url的端口号,没有则为空
  7. protocol:使用的协议
  8. search:url的查询字符串,通常为?后面的内容

3. navigator:浏览器属性

属性

  1. appCodeName:浏览器代码名的字符串表示
  2. appName:官方浏览器名的字符串表示
  3. appVersion:浏览器版本信息的字符串表示
  4. cookieEnabled:如果启用cookie返回true,否则返回false
  5. javaEnabled:如果启用java返回true,否则返回false
  6. platform:浏览器所在计算机平台的字符串表示
  7. plugins:安装在浏览器中的插件数组
  8. taintEnabled:如果启用了数据污点返回true,否则返回false
  9. userAgent:用户代理头的字符串表示

4.screen:当前窗口与屏幕相关信息

属性

  1. availHeight:屏幕像素高度减去系统组件高度(只读)
  2. availLeft:没有被系统组件占用的屏幕的最左侧像素(只读)
  3. availTop:没有被系统组件占用的屏幕的最顶端像素(只读)
  4. availwidth:屏幕像素宽度减去系统组件宽度(只读)
  5. colorDepth:表示屏幕颜色的位数;多数系统是32(只读)
  6. pixelDepth:屏幕的位深(只读)
  7. height:屏幕像素高度
  8. left:当前屏幕左边的像素距离
  9. top:当前屏幕顶端的像素距离
  10. width:屏幕像素宽度
  11. orientation:返回ScreenOrientationAPI中屏幕的朝向

5.history:浏览器URL的历史记录 

属性

  1. length(只读):返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页。
  2. state(只读):返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态的方式
  3. scrollRestoration:允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)

方法

  1. forward:向前跳转一个页面
  2. back:向后跳转一个页面
  3. go:向前或向后跳转n个页面