BOM常用属性和方法

1,592 阅读6分钟

前言

最近在学框架源码的时候,发现底层需要熟悉大量的原生知识

于是今天来回顾和整理一下BOM相关的知识点

了解BOM

BOM是浏览器对象模型(Browser Object Model),js认为整个浏览器可以当成一个对象window,BOM中定义了很多对象、属性和方法用于操作浏览器。

我们知道DOM是文档对象模型用于表示和操作浏览器的HTML文档部分,所以js进一步认为DOM属于浏览器对象的一部分。除此之外,window上还包括location用于获取页面url地址的位置对象、history浏览器历史记录对象、screen屏幕对象、navigator等

window对象

window 对象是BOM中所有对象的核心,是BOM中所有对象的父对象,其自身还包含一些控制窗口的函数,那我就先来看看window

window代表整个浏览器,代表全局。所以在全局声明的函数、变量都是属于window,包括变量未声明就赋值也该变量也属于window。

  1. 查看浏览器窗口尺寸(或者叫可视区域,不包括工具栏和滚动条)
//IE9以上、Chrome、Firefox、Opera 以及 Safari:
window.innerWidth;
window.innerHeight;
//IE5,6,7,8
window.documentElement.clientHeight ;
window.documentElement.clientWidth;
//IE5,6,7,8兼容性紊乱上面方法不一定行,不行可用下面这种方式
window.body.clientWidth
window.body.clientHeight

封装一个兼容所有浏览器的方法,用于获取浏览器可视宽高:

window.getInnerWH = function () {
    return {
        width: window.innerWidth || window.documentElement.clientWidth || window.body.clientWidth,
        height: window.innerHeight || window.documentElement.clientHeight || window.body.clientHeight
    }
}
  1. 查看完整窗口大小
window.outerWidth
window.outerHeight
  1. 查看元素的尺寸
var odiv = document.getElementsByTagName('div')[0]
odiv.offsetWidth
odiv.offsetHeight

offsetHeight = height + padding + border

offsetWidth = width + padding + border

  1. 查看元素的位置

odiv.offsetLeft 距离左边距离

odiv.offsetTop 距离右边距离

有定位元素,返回的是相对于最近有定位的父级元素的位置;无定位元素,返回的是相对于文档的位置

  1. 查看元素最近有定位的父级

odiv.offsetParent返回最近有定位的父级,若无,则返回body;body的offsetParent返回null;

  1. 查看元素的几何尺寸

odiv.getBoundingClientRect() 该方法返回一个对象,对象里面有left、right、top、bottom和width、height。

兼容性很好,但返回的结果并不是实时的。

image.png

  1. 打开一个窗口
window.open(URL,name,specs,replace)

URL:表示要打开的页面地址。如果没有指定URL,打开空白窗口

name:指定target属性或窗口的名称

  • _blank - URL加载到一个新的窗口。这是默认
  • _parent - URL加载到父框架
  • _self - URL替换当前页面
  • _top - URL替换任何可加载的框架集
  • name - 窗口名称

specs:设置窗口规格,可选。一个逗号分隔的项目列表

  • height=pixels 窗口的高度。最小值为100
  • left=pixels 该窗口的左侧位置
  • location=yes|no|1|0 是否显示地址字段.默认值是yes
  • menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
  • resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
  • scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
  • status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
  • titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
  • toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
  • top=pixels 窗口顶部的位置.仅限IE浏览器
  • width=pixels 窗口的宽度.最小.值为100
  • channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
  • directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
  • fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器

replace:可选,用于替换浏览历史中的当前条目 Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

  • true - URL 替换浏览历史中的当前条目。
  • false - URL 在浏览历史中创建新的条目。
  1. 关闭浏览器窗口

window.close()

  1. 移动当前窗口位置

window.moveTo(x,y) 将窗口的左上角移动到指定坐标

window.moveBy(x的增量,y的增量) 用于增加

open()、close()、moveTo()的兼容性都很好

  1. 调整当前窗口的尺寸

window.resizeTo(width,height) 用于把窗口大小调整为指定的宽度和高度

window.resizeBy(宽的增量,高的增量) 用于增加宽高

但这两个方法在新版的浏览器中废除了

  1. 浏览器窗口在屏幕的位置

距离左边:window.screenX 或者 window.screenLeft

距离上边:window.screenY或者window.screenTop

  1. 让滚动条滚动
  • scroll(x,y)

  • scrollTo(x,y)

  • scrollBy(x,y) x,y分别表示滚动条往x轴滚动距离和滚动条往下滚动的距离

前面个两个方法基本一样,而scrollBy()会在之前的数据基础上做累加。可以利用scrollBy实现快速阅读的功能。

  1. 查看滚动条滚动距离

window.pageXoffset

window.pageYoffset

但是低版本IE不兼容,那它用下面两组方法

document.documentElement.scrollLeft

document.documentElement.scrollTop

或者

document.body.scrollLeft

document.body.scrollTop

因为兼容性比较紊乱,采取的方法是两种方法相加,因为不可能两个同时有值 因此我们可以封装一个兼容所有浏览器的方法,用于查看滚动条滚动距离:

window.getScrollLT = function () {
  return {
    left: window.pageXOffset || document.documentElement.scrollLeft + document.body.scrollLeft,
    top: window.pageYOffset || document.documentElement.scrollTop + document.body.scrollTo
  }
}
  1. 弹窗

js中有三种弹窗:警告框、确认框、提示框

  • window.alert("sometext") 当警告框出现后,用户需要点击确定按钮才能继续进行操作。
  • window.confirm("sometext") 确认框通常用于验证是否接受用户操作。

当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作;当你点击 "确认", 返回 true, 如果点击 "取消", 返回 false。

  • window.prompt("sometext","defaultvalue") 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

  1. 定时器方法也是定义在window上

window.clearInterval()

window.setTimeout()

window.clearInterval()

window.clearTimeout()

具体的使用可以看js定时器那块,讲得非常清楚。

location位置对象

用于获取页面的url地址

  • location.href 返回当前页面整个URL
  • location.protocol 返回web协议(http://或者https://)
  • location.hostname 返回web主机的域名
  • location.port 返回端口号
  • location.pathname 返回路径和文件名。
  • location.hash 返回一个URL的锚部分
  • assign() 载入一个新的文档
  • reload() 重新载入当前文档
  • replace() 用新的文档替换当前文档

history浏览器历史记录对象

  • history.back();
  • history.forword(); 分别对应加载历史列表中的后一个和前一个URL
  • history.go() 加载 history 列表中的某个具体页面
  • history.length 历史记录条目数

screen屏幕对象

可用的屏幕宽度和高度

  1. 完整的分辨率:
  • screen.width
  • screen.height
  1. 去掉任务栏的可用宽和高(减去界面特性,如任务栏)
  • screen.availWith
  • screen.availHeight

navigator 对象

  • navigator 对象包含有关浏览器的信息
  • navigator.appCodeName 返回浏览器的代码名
  • navigator.appName 返回浏览器的名称
  • navigator.appVersion 返回浏览器的平台和版本信息
  • navigator.cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
  • navigator.platform 返回运行浏览器的操作系统平台
  • navigator.userAgent 返回由客户机发送服务器的user-agent 头部的值

image.png

  • navigator.javaEnabled() 指定是否在浏览器中启用Java
  • navigator.taintEnabled() 规定浏览器是否启用数据污点(data tainting)

以上就是BOM及常用属性和方法的相关内容