JavaScript基础 -- BOM

JavaScript三大核心:

1）核心（ECMAScript）：描述了JS的语法和基本对象

2）文档对象模型（DOM）：处理网页内容的方法和接口

3）浏览器对象模型（BOM）：与浏览器交互的方法和接口

BOM部分主要是针对浏览器的内容，主要对象（常用window对象和location对象）如下：

　　1.window是全局对象很多关于浏览器的脚本设置都是通过它。

　　2.location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。

　　3.navigator中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。

　　4.history不太常用，一般应该不会有写关于历史记录的脚本。

　　5.screen常常用来判断屏幕的高度宽度等。

一、window对象

window对象在浏览器中具有双重角色：它既是ECMAscript规定的全局global对象，又是javascript访问浏览器窗口的一个接口。

1.获取窗口相对于屏幕左上角的位置

//获取窗口相对于屏幕左上角的位置
var leftPos = (typeof window.screenLeft === 'number')?window.screenLeft:window:screenX;
var topPos = (typeof window.screenLeft === 'number')?window.screenTop:window:screenY;

　　需要注意的一点是，在IE，opera 中，screenTop保存的是页面可见区域距离屏幕左侧的距离，而chrome,firefox,safari中，screenTop/screenY 保存的则是整个浏览器区域距离屏幕左侧的距离。也就是说，二者差了一个浏览器工具栏的像素高度。

2.移动窗口，调整窗口大小

　　window.moveTo(0,0)

　　window.moveBy(20,10)

　　window.resizeTo(100,100);

　　window.resizeBy(100,100);

　　注意，这几个方法在浏览器中很可能会被禁用。

3.获得浏览器页面视口的大小

var pageWith = document.documentElement.clientWidth || document.body.clientWidth;
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;

4.导航和打开窗口

　　window.open()既可以导航到特定 的URL，也可以打开一个新的浏览器窗口，其接收四个参数，要加载的url，窗口目标（可以是关键字 _self,_parent,_top,_blank）,一个特性字符串，以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要 传递第一个参数。

　　注意，在很多浏览器中，都是阻止弹出窗口的。

5.几个时序相关的函数（原来这是BOM的实现，而非ECMAjavascript的实现）

　　setInterval()

　　setTimeout()

6.系统对话框，这些对话框外观由操作系统/浏览器设置决定，css不起作用，所以很多时候可能需要自定义对话框

　　alert():带有一个确定按钮

　　confirm()：带有一个确定和取消按钮

　　prompt():显示OK和Cancel按钮之外，还会显示一个文本输入域

二、location对象

location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。

location.hash　　#contents　　返回url中的hash，如果不包含#后面的内容，则返回空字符串

location.host　　www.wrox.com:80　　返回服务器名称和端口号

location.port　　80　　返回端口号

location.hostname　　www.wrox.com　　返回服务器名称

location.href　　http://www.wrox.com　　返回当前加载页面的完整url

location.pathname　　/index.html　　返回url中的目录和文件名

location.protocol http　　返回页面使用的协议

location.search　　?q=javascript　　返回url中的查询字符串

改变浏览器的位置：

location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录，用户不能回到前一个页面。

location.reload()：重置当前页面，可能从缓存，也可能从服务器；如果强制从服务器取得，传入true参数

三，navigator对象

这个对象代表浏览器实例，其属性很多，但常用的不太多。如下：

navigator.userAgent：用户代理字符串，用于浏览器监测中、

navigator.plugins:浏览器插件数组，用于插件监测

navigator.registerContentHandler 注册处理程序，如提供RSS阅读器等在线处理程序。

四、history对象

history对象保存着用户上网的历史记录，使用go()实现在用户的浏览记录中跳转：

history.go(-1) 等价于history.back()

history.go(1) 等价于 history.forward()

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

history.go('wrox.com')

五、screen对象

【availHeight】

　　屏幕的像素高度减去系统部件高度之后的值(只读)，代表屏幕可用高度，单位为像素

【availHeight】

　　屏幕的像素宽度减去系统部件宽度之后的值(只读)，代表屏幕可用宽度，单位为像素

console.log(screen.availHeight);//1040
console.log(screen.availWidth);//1920

【height】

　　屏幕的像素高度

【width】

　　屏幕的像素宽度

console.log(screen.width);//1920
console.log(screen.height);//1080

　　screen.height和screen.width两个属性，一般用来了解设备的分辨率。除非调整显示器的分辨率，否则这两个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率

　　可以根据屏幕分辨率，将用户导向不同网页

if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}