JS之BOM

发表于

BOM（Browser Object Model）

BOM（Browser Object Model）浏览器对象模型，它主要处理的是浏览器窗口和框架，独立于内容之外。BOM提供了很多很多对象，用于访问浏览器的功能。

要注意的是，浏览器产商会根据自己的想法去扩展它，所以不同浏览器的实现方式有所不同，不过，浏览器之间有一些共有的对象就成了事实上的标准。

主要的BOM对象有：

  • window
  • loaction
  • navigator
  • screen
  • history

除次之外还有一些其他的对象，大家可以上W3school上查阅资料！

window

window，这是一个所有浏览器都支持的对象，代表的是浏览器的一个实例，通过它我们可以用js访问浏览器窗口，同时他也是ECMAScript定义的一个global对象。

全局对象及作用域

因为window是一个全局的对象，所以我们在全局作用域下声明的对象、函数及变量会自动变成它下面的成员。

先来看一个例子：

1
2
3
4
5
6
7
8
var count = 20;
function showCount(){
    console.log(this.count);
}
console.log(window.count); //20
showCount();   //20
window.showCount();   //20

我们在全局作用域中定义了一个变量count和一个函数showCount，他们会成为window对象的属性和方法，但在调用时可以省略window。所以除直接count这样调用，也可以通过window.count这样调用属性或者方法。这时，再调用showCount方法时，方法中的this指代的就是window了，自然this.count就指向了window.count。

Window位置

各种浏览器都提供了window的位置属性来确定浏览器窗口相对于屏幕的位置。

IE、Safari、Chrome、opera都提供了ScreenLeft和ScreenTop属性，代表窗口距离屏幕左边和上方的距离。

FireFox虽然不支持上面两个属性，但提供另外两个属性ScreenX和ScreenY，含义与前两个属性相同，支持这两个属性的还有Safari和Chrome。

附上能在各大浏览器正常获取到属性的兼容代码：

1
2
3
var sLeft = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
var sTop = (typeof window.screenTop == "number")?window.screenTop:window.ScreenY;

不过这两对属性获取到的信息还是有些差别：

  • screenLeft和screenTop获取到的距离是页面可见区域到屏幕的距离（并不包括滚动栏和上方的工具栏）。
  • screenx和screenY则是整个浏览器窗口距离屏幕的距离

moveTo（）和moveBy（）

除了获取位置信息外，我们还可以通过moveTo和moveBy这两个方法将窗口移到我们想要的地方上去。

moveTo（）和moveBy（）都接收两个参数，其中moveTo（）接收的是新位置的X和Y坐标，moveBy（）接收的是在水平和垂直方向上移动的像素数。

例子：

1
2
3
4
5
6
7
//将屏幕移到（100,100）
window.moveTo(100,100);
//将屏幕下移50px
window.moveBy(0,50);
> 要注意，这些方法只适合对外层的window使用。

window尺寸

  • innerWidth:浏览器窗口内部宽度
  • innerHeight:浏览器窗口内部高度
  • outerWidth:浏览器窗口外部宽度
  • outerHeight:浏览器窗口外部高度

ps：在Chrome中，这四个属性返回的都是视口(view port)的大小。

IE8及较早版本不支持这些属性，但可以通过DOM获取这些信息。

  • 标准模式下：

    document.document.clientWidth
    document.document.clientHeight

  • 混杂模式下：

    document.body.clientWidth
    document.body.clientHeight

混杂模式下的Chrome也可以通过这些属性获得视口大小。

附上获取视口大小的兼容代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
    }
}
-------------------------
// 或者下面这种
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.

open()和close()

window.open(url,target,param)

  • url:要打开的地址
  • target：打开窗口的位置 _blank,_self,_parent(父框架)
  • 新窗口的设置参数

window.close()

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器

location

window.location对象用于获取当前页面的URL，也可将当前页面重定向到新的页面

loaction的一些属性

  • hostname:返回web主机的域名
  • pathname：返回当前页面的路径和文件名
  • port:返回web主机的端口
  • protocol：返回所使用的web协议
  • hash:返回url中”#“后的字符串
  • href:返回当前页面的完整url，location的toString（）方法也返回这个值
  • search：返回url的查询字符串，字符串以问号开头

位置操作

可以通过location.assign（）来改变浏览器的位置。

1
location.assign("http://www.baidu.com")

调用者方法会在本页面打开新的url，并在历史记录中生成一条记录。其实，当我们给window.location和location.href设置一个url时，最终调用的也是assign（）方法。

除了这些浏览器位置的方法，也可通过修改location的一些属性来达到目的。

1
2
3
4
5
6
7
8
9
10
11
12
13
//初始化的url为http://www.liby.com/tag/js
//将URL修改成http://www.liby.com/tag/js#article1
locatin.hash = "#article1"
//将URL修改成http://www.liby.com/tag/js?id=101
locatin.search = "?id=101"
//将URL修改成http://www.candy.com/tag/js
location.hostname = "www.candy.com"
//将URL修改成http://www.candy.com/tag/css
location.pathname = "tag/css"

上面的操作都会在跳转到新url的同时在历史记录里添加一条新的记录，这样单击后退按钮就可回到之前的页面，我们可以用replace（）来避免。

最后一个方法reload（）表示重载当前页面，可以添加参数true，代表从服务器重载，也可不传递参数，这样就有可能直接从缓存里加载了。

navigator对象可以让我们获取到浏览器的信息。
例如可以用plugins来获取文档中安装的插件，或者获取user-agent的值，这里大家可以上w3cschool详细了解。

screen

Screen 对象包含有关客户端显示屏幕的信息，像屏幕的可用高度，或者屏幕的颜色分辨率等等。

history

history对象保存的是用户上网的历史记录。处于安全原因，开发人员无法获取实际的url，但我们可以通过方法实现前进或者后退。

history的属性与方法：

  • length：返回浏览器历史记录中的url数量
  • forward（）：加载history列表中的下一个url
  • back（）：加载history列表中的前一个url
  • go（）：可以通过指定正负数值来前进或后退到指定的页面