Javascript 在浏览器环境中 (二) BOM

BOM

BOM是Browser Object Model的缩写。它是你能访问到的浏览器和计算机屏幕的对象集合。可以通过全局对象window和window.screen访问到。

 

重新认识window

我们已经知道了，在javascript中，每个运行环境都会有一个全局对象。在浏览器的环境中，这个全局对象就是window。所有的全局变量都是window对象的属性 。

window.test=1;//1
test;//1

 

当然所有的全局函数都是window对象的方法如

parseInt('123a');//123
window.parseInt('123a');//123

 

除了作为全局对象，window对象还包含了浏览器环境的相关数据。让我们看看window对象的其他属性。当然每个浏览器都是不一样的。我们就说一些常用的。规范的。

 

window.navigator

navigator对象提供了浏览器的信息和相关功能。一个属性是navigator.userAgent。一个识别浏览器的属性。在firefox下如下：

window.navigator.userAgent;
// "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12"

 在IE浏览器如下：

     Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET 
     CLR 2.0.50727; .NET CLR 3.0.04506.30)

 

因为每个浏览器功能是个不相同的。所以一般开发这都会用这个属性来判断浏览器，这样可以写出兼容性更好的代码。

if (navigator.userAgent.indexOf('MSIE') !== -1) {
  // this is IE
} else {
  // not IE
}

 最好不要用这种方式判断浏览器，要用特殊功能检测的方法。原因是很难做到知道所有浏览器和相关版本。更容易使用的 是用特殊性的方法检测，如

if (typeof window.addEventListener === 'function') {
  //支持此方法
} else {
  //不支持此方法，有其他方式实现
}

 另一个原因是一些浏览器允许用户去修改userAgent字符串，这样就可以做到隐藏自己使用的浏览器。

 注：这一方法可以伪造成google或baidu的爬虫，有些网站针对搜索引擎进行优化，让爬虫访问更多的链接。这样修改可 能造成安全漏洞。。。

 

window.location

这个属性提供了当前URL的相关信息。如location.href.是全部的URL。location.host仅仅是主机。用for循环来看看所有的属性。

//URL:http://www.test.com:8080/search?p=javascript#results
 for(var i in location) {alert(i + ' = "' + location[i] +  '"')}
href="http://www.test.com:8080/search?p=javascript#results"
hash="#results"
host="www.test.com:8080"
hostname="www.text.com"
pathname="/search"
port="8080"
potocol="http:"
search="?p=javascript"

 还有三个方法。reload(),assign(),replace()

 如果要跳转到其他页面有很多方法

window.location.href = 'http://www.iteye.com'
location.href = 'http://www.iteye.com'
location = 'http://www.iteye.com'
location.assign('http://www.iteye.com')

 replace方法基本和assign是相同的。唯一的区别是在历史记录里不会新建一条记录。

 重载页面可以用如下方法

location.reload();

 还有其他技巧可以实现页面重载

window.location.href = window.location.href;
location = location

  window.history

window.history允许在相同浏览器的会话下，限制的访问以前用户所访问的页面。一个例子，你可以知道在用户访问此页面前，还访问过多少页面。

window.history.length;//3

但是不能看到具体的URL，因为这是隐私。。。。

window.history[0];//ERROR

可以用history.forward()和history.back()来控制用户的前进和后退。

也可以history.go(-2)，让用户返回历史页面。如果要重载页面可以用history.go(0);

 

window.frames

这个属性是整个页面frame的集合。需要注意的是frames和iframes没有区别。无论页面上是否有frames。window.frames总是指向window.

注：IE下的window.frames对象仅仅是个Object.

 window.frames === window;//true 

 每个frame都有自己的全局对象window.假设页面上有

<iframe name="myframe" src="about:blank" />

 想要访问iframe的window对象，如下方法都可以

window.frames[0]
window.frames[0].window
frames[0].window
frames[0]

 在页面中，可以访问fame的属性。如重载frame

frames[0].window.location.reload()

 在frame也可以访问页面

frames[0].parent === window//true 

 可以使用top来访问最上一层的页面。

window.frames[0].window.top === window

 

window.screen

screen提供了浏览器之外的桌面信息。screen.colorDepth是显示器的色深。对监控系统来说比较有用

window.screen.colorDepth;//32

 还可以知道屏幕的分辨率

screen.width;//1440
screen.availWidth;//1440
screen.height;//900
screen.availHeight;//847

 height和availHeight不同的是，height是全部的高度，而availHeight是除了操作系统的菜单之后的高度，如windows的开始菜单。。。

 

 

window.open()/close()

再说了很多跨浏览器的window的属性之后，我们来看看window的方法。open方法可以新弹出一个页面。因为广告的原因一般用户都屏蔽了弹出页面。。。

window.open()有下列参数

• 新开网页的URL
• 新开窗口的名字
• 用逗号隔开的属性：resizable.是否让用户自定义大小,width,height 窗口的长宽,status窗口的状态栏等等

window.open()返回了一个窗口的实例

var win = window.open('http://www.iteye.com', 'packt',  
                      'width=300,height=300,resizable=yes');

 win对象指向了窗口的window对象。你可以校验win来判断弹出窗口是否被屏蔽了。

win.close()会关闭这个新的窗口。

尽量少用window.open()。可以用浮动的div来取代。

 

window.moveTo()/window.resizeTo()

window.moveTo(100,100).浏览器会移动到屏幕x=100,y=100的位置上。位置是相对于左上角。

window.resizeTo(100,100).浏览器调整大小100*100

 

window.alert(), window.prompt(), window.confirm()

我们经常使用alert()就是window的一个方法。如alert("haha").需要注意的是这三个方法都不是ECMAScript 。而是浏览器本身的方法。

confirm()让用户有个选择Ok和Cancel.

prompt()让用户有个文本输入。

confirm一般用来让用户是否确定执行某个操作的功能，如是否删除

if (confirm('是否删除?')) {
  // delete
} else {
  // abort
}

 prompt()弹出个对话框让用户输入

 

var answer = prompt('And your name was?');

 

window.setTimeout(), window.setInterval()

这两个方法可以控制按照指定的计划来执行代码。

setTimeout()在多少毫秒之后，执行一次代码。

setInterval()每隔多少秒执行代码

 

function boo(){alert('javaeye!');}
setTimeout(boo, 2000);//4

上面的代码两秒之后执行。注意返回一个结果为4。这个是timeout的ID,我们可以用clearTimeout方法来删除它。

下面看看setInterval的使用

var id = setInterval(boo, 2000);

 以上结果会每隔两秒执行一次boo方法。我们用clearInterval来停止。

 

window.document

window.document是个BOM对象指向了本页的文本对象。下一节介绍DOM

对于window.frames === window;这句在FF中是true，但是IE中是false。

对 ，在IE下window.frames是个类似'window'。