浏览器中的BOM对象

2021-08-282023-04-02编程语言 / JavaScript17 分钟读完 (大约2561个字)0次访问

BOM

BOM 是指浏览器对象模型。

主要用于开发人员控制浏览器显示的界面以外的部分，例如浏览器窗口的位置、浏览器的地址信息、浏览历史界面的前进后退等。

一、window

window 对象是 BOM 的核心对象，表示浏览器的一个实例。

1.1 全局声明

window 既是访问浏览器窗口的接口，也是 ECMAScript 的全局对象（Global）。

直接在全局作用域声明的变量、函数等都会变成 window 对象的属性和方法：

<script>
  var name = 'zhangsan'
  function getName() {
    return this.name
  }
  
  alert(name)              // zhangsan
  alert(getName())         // zhangsan
  alert(window.name)       // zhangsan 
  alert(window.getName())  // zhangsan
</script>

虽然定义全局变量会直接归到 window 中，但是还是和直接在 window 中定义的属性有点不同。

全局变量不能使用 delete 删除变量，但是在 window 中定义的属性是可以的：

<script>
  var name = 'zhangsan'
  window.age = 12
  
  alert(window.name) // zhangsan 
  alter(window.age)  // 12
  
  // 删除无用
  delete window.name
  alter(window.name) // zhangsan
  
  // 可以删除
  delete window.age
  alter(window.age)  // undefined
</script>

产生这种情况的原因是，全局声明的变量，虽然被归到 window 中，但是它的一个特性值 [[Configurable]] 默认会被设为 false，导致全局声明的变量没有办法使用 delete 进行删除。

1.2 窗口和框架

框架，一般指的是 HTML 中的 <frame> 标签所表述的元素。

每个框架都类似于一个浏览窗口，因此每个框架都有自己的 window 对象。
框架的 window 对象会保存在父框架或父窗口的 window.frames 中。
一般情况下框架的 window 对象都会有一个 name 属性。

<html>
  <frameset>
    <frame src="top.html", name="topFrame">
    <frameset>
      <frame src="bottom-left.html", name="bottomLeftFrame">
      <frame src="bottom-right.html", name="bottomRightFrame">
    </frameset>
  </frameset>
</html>

对于当前的 window 而言，window.frames 将会包含3个 window 对象，分别是框架 topFrame、bottomLeftFrame 和 bottomRightFrame 的 window 对象。

可以通过 window.frames[1] 或者 window.frames['bottomLeftFrame'] 来访问指定的框架 window 对象。

1.2.1 top

top（window.top）对象始终指向最高（最外）层的框架，也就是浏览器窗口。

1.2.2 parent

parent（window.parent）对象指的是当前框架的直接上层框架（父框架）。

在没有框架的情况下，parent === top。

加入上述代码中的 top.html 文件如下：

<html>
  <frameset>
    <frame src="topInnerLeft.html", name="topInnerLeftFrame">
    <frame src="topInnerRight.html", name="topInnerRightFrame">
  </frameset>
</html>

那么对于框架 topInnerLeftFrame 的 window 对象而言，它的 window.parent 指的就是框架 topFrame 的 window 对象。

1.2.3 self

self（window.self）指的是 window 对象本身。

引入 self 只是为了和 top、parent 对应，貌似没什么特别作用。

1.3 窗口位置

窗口位置指的是浏览器窗口在屏幕上的位置信息。不同浏览器提供的位置属性不一样。

IE、Safari、Opera 和 Chrome 都提供 screenLeft 和 screenRight，分用于表示窗口相对于屏幕的左边和上边的位置。

FireFox、Safari、Chrome 提供 screenX 和 screenY ，对应相同的位置信息。

跨浏览器获取浏览器窗口的位置信息，可以用以下代码：

1 2	var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

移动窗口位置，可以使用 moveTo 和 moveBy 方法，moveTo 是移动到指定的位置， moveBy 是移动的方向距离。

// 将窗口移动到(100, 200)
window.moveTo(100, 200)

// 将窗口向右移动100，向下移动200
window.moveBy(100, 200)

不过这两个方法有可能被浏览器禁用，因此最好不要使用。

1.4 窗口大小

IE9+、Firefox、Safari、Opera 和 Chrome 提供了4个属性来获取窗口的大小：innerWidth、innerHeight、outerWidth、outerHeight，不过不同浏览器返回的值不太相同。有些是返回浏览器窗口本身的大小，有些是返回视口（viewport）的大小。

获取视口大小的代码如下：

var pageWidth = window.innerWidth
var pageHeight = window.innerHeight

if (typeof pageWidth != 'number') {
  if (document.compatMode == 'CSS1Compat') {
    pageWidth = document.documentElement.clientWidth
    pageHeight = document.documentElement.clientHeight
  } else {
    pageWidth = document.body.clientWidth
    pageHeight = document.body.clientHeight
  }
}

使用 resizeTo 和 resizeBy 可以改变浏览器窗口的大小。resizeTo 是指定改变后浏览器窗口的大小，resizeBy 是指定改变窗口的宽高差值。

// 将窗口大小改变为(100, 200)
window.resizeTo(100, 200)

// 将窗口宽度减少100，高度减少200
window.resizeBy(100, 200)

不过这两个方法也有可能被浏览器禁用，因此也是最好不要使用。

1.5 导航和打开窗口

window.open() 方法可以导航到特定的 URL，也可以打开一个新的浏览器窗口。

接收的参数可以有4个：

URL：要加载的URL
窗口目标：指定打开窗口的位置，是在当前窗口打开，还是新窗口打开
特性字符串：指定打开窗口的相关信息，例如窗口的高度、宽度等
标志位：用于标识新页面是否设置为浏览器历史记录中的当前加载页面

第二个参数的可选值有：

_self：当前框架或窗口打开
_parent：父框架或父窗口打开
_top：当前浏览器窗口打开
_blank：新的浏览器窗口打开
frameName：指定的框架打开，不存在该框架时，新窗口打开

1 2	// 等同于<a href="http://ww.baidu.com", target="topFrame"> window.open('http://www.baidu.com', 'topFrame')

上述代码会在 topFrame 框架中加载新页面，如果框架不存在，则会新窗口打开。

1.5.1 窗口引用

window.open() 方法会返回一个指向新窗口的引用，该引用和 window 对象差不多。

var newWin = window.open('http://www.baidu.com', 'topFrame')
newWin.moveTo(100, 200)
newWin.resizeTo(100,200)
newWin.close()

同时，新打开窗口也拥有一个属性 opener 指向创建它的原始窗口对象：

1 2	var newWin = window.open('http://www.baidu.com', 'topFrame') alert(newWin.opener == window) // true

1.5.2 窗口屏蔽

大多数浏览器有内置的弹出窗口屏蔽程序，因此 window.open() 有可能返回 null。因此使用 window.open() 时，最好封装在一个 try-catch 块中：

var blocked = false

try {
  var newWin = window.open('http://www.baidu.com', '_blank')
  if (newWin == null) {
      blocked = true
  }
} catch (ex) {
  blocked = true
}

if (blocked) {
    alert('open window was blocked')
}

1.6 location

location（window.location）对象提供了当前窗口中加载的文档的有关信息，还有导航功能。

另外，在 window 和 document 中，有 window.location == document.location。

location 对象中包含的属性有：

href：当前加载页面的完整 URL，如 http://www.baidu.com
procotol：页面使用的协议，如 http:、https:
host：服务器名称以及端口，如 www.baidu.com:80
hostname：服务器名称，不包括端口，如 www.baidu.com
port：端口号，如 80
pathname：URL 路径，如 /uers/info
search：URL 查询字符串，如 ?age=12&&city=guangzhou
hash：URL 中的散列值，如 #content

1.6.1 位置操作

直接改变 location 代表的值，就可以直接打开新的 URL：

// 这几种方式效果是一样的
window.location = 'http://www.baidu.com'
location.href = 'http://www.baidu.com'
location.assign('http://www.baidu.com')

也可以单独修改 location 里面的属性：

// http://www.baidu.com:80/users/
window.location

// http://www.baidu.com:80/users/#content
location.hash = '#content'

// http://www.baidu.com:80/another/
location.pathname = 'another'

// http://www.baidu.com:8080/users/
location.port = '8080'

使用上述的修改方式，会在浏览器的历史记录中生成一条新的记录，因此用户通过单击“后退”按钮后可以返回到上一个页面。

1.6.2 相关方法

使用 location.repalce() 方法可以禁用这种行为，它会导航到一个新的页面，但是不会在浏览器历史记录中生成新的记录。

1 2	// 不会生成新的历史记录，因此跳转后无法回到前一个页面 location.replace('http://www.baidu.com')

使用 location.reload() 方法可以重新加载当前显示的页面。

// 有可能从缓存中加载
location.reload()

// 强制从服务器加载
location.reload(true)

1.7 navigator

navigator（window.navigator）对象用于识别客户端浏览器的类型等信息。

主要实现属性包括（还有很多属性没列出来）：

appCodeName：浏览器名称
appName：完整的浏览器名称
appVersion：浏览器的版本
cookieEnabled：表示 cookie 是否启用
mimeTypes：在浏览器中注册的MIME类型数组
platform：浏览器所在的系统平台
plugins：浏览器安装的插件
userAgent：浏览器的用户代理字符串

navigator 对象主要提供来比较多来`客户端浏览器的相关信息，不同的浏览器实现还不一样。

1.8 screen

screen（window.screen）对象用来表明客户端的一些属性，包括浏览器窗口外部的显示器的信息，例如像素宽度和高度。

其中包含的属性有：

height：屏幕的像素高度
width：·屏幕的像素宽度
left：当前屏幕距左边的像素距离
top：当前屏幕距上边的像素距离
colorDepth：用于表示颜色的位数

screen 对象不常用，而且在涉及移动设备时，使用前还需要进行相应的调整。

1.9 history

history（window.history）对象用于保存用户上网的历史记录，从打开窗口的那一刻算起。

history 是 window 的属性，因此不同的浏览器窗口、标签页、框架等都有自己的 history 对象。

出于安全考虑，history 对象不能看到用户浏览过的 URL，只能指导历史记录条数等一些信息。

使用 go() 方法可以在历史记录中进行任意的跳转，可以向前或者向后。

// 后退一页
history.go(-1)

// 前进两页
history.go(2)

go() 还可以使用字符串，表示跳转到包含该字符串的记录，因此有可能是前进，也可能是后退：

1 2	// 跳到最近的 baidu.com 页面 history.go('baidu.com')

使用简写的 forward() 和 back() 可以用来替代 go(1) 和 go(-1)：

// 前进一页
history.forward()

// 后退一页
history.back()

浏览器中的BOM对象

http://example.com/lang/js/bom/

作者

jiaduo

发布于

2021-08-28

更新于

2023-04-02

许可协议

JavaScript

浏览器中的BOM对象

BOM

一、window

1.1 全局声明

1.2 窗口和框架

1.2.1 top

1.2.2 parent

1.2.3 self

1.3 窗口位置

1.4 窗口大小

1.5 导航和打开窗口

1.5.1 窗口引用

1.5.2 窗口屏蔽

1.6 location

1.6.1 位置操作

1.6.2 相关方法

1.7 navigator

1.8 screen

1.9 history

作者

发布于

更新于

许可协议

目录