Javascript的BOM 1

BOM 也叫浏览器对象模型，它提供了不少对象，用于访问浏览器的功能。BOM 缺乏规范，每一个浏览器提供商又按照本身想法去扩展它，那么浏览器共有对象就成了事实的标准。因此，BOM 自己是没有标准的或者尚未哪一个组织去标准它。
一．window对象
BOM 的核心对象是window，它表示浏览器的一个实例。window 对象处于JavaScript 结
构的最顶层，对于每一个打开的窗口，系统都会自动为其定义window 对象。

 

1.对象的属性和方法
window 对象有一系列的属性，这些属性自己也是对象。

 

 

 

window 下的属性和方法，可使用window.属性、window.方法()或者直接属性、方法()
的方式调用。例如：window.alert()和alert()是一个意思。
2.系统对话框
浏览器经过alert()、confirm()和prompt()方法能够调用系统对话框向用户显示信息。系
统对话框与浏览器中显示的网页没有关系，也不包含HTML。

//弹出警告
alert('Lee'); //直接弹出警告
//肯定和取消
confirm('请肯定或者取消'); //这里按哪一个都无效
if (confirm('请肯定或者取消')) { //confirm 自己有返回值
alert('您按了肯定！'); //按肯定返回true
} else {
alert('您按了取消！'); //按取消返回false
}
//输入提示框
var num = prompt('请输入一个数字', 0); //两个参数，一个提示，一个值
alert(num); //返回值能够获得
//调出打印及查找对话框
print(); //打印
find(); //查找
defaultStatus = '状态栏默认文本'; //浏览器底部状态栏初始默认值
status='状态栏文本'; //浏览器底部状态栏设置值

3.新建窗口
使用window.open()方法能够导航到一个特定的URL，也能够打开一个新的浏览器窗口。
它能够接受四个参数：1.要加载的URL；2.窗口的名称或窗口目标；3.一个特性字符串；4.
一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

open('http://www.baidu.com'); //新建页面并打开百度
open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent'); //在本页窗口打开百度,_blank 是新建

PS：不命名会每次打开新窗口，命名的第一次打开新窗口，以后在这个窗口中加载。
窗口目标是提供页面的打开的方式，好比本页面，仍是新建。

 

 

//第三参数字符串
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');
//open 自己返回window 对象
var box = open();
box.alert(''); //能够指定弹出的窗口执行alert();
//子窗口操做父窗口
document.onclick = function () {
opener.document.write('子窗口让我输出的！');
}

3.窗口的位置和大小
用来肯定和修改window 对象位置的属性和方法有不少。IE、Safari、Opera 和Chrome
都提供了screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。
Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时
支持这两个属性。

//肯定窗口的位置,IE 支持
alert(screenLeft); //IE 支持
alert(typeof screenLeft); //IE 显示number，不支持的显示undefined
//肯定窗口的位置,Firefox 支持
alert(screenX); //Firefox 支持
alert(typeof screenX); //Firefox 显示number,不支持的同上

PS：screenX 属性IE 浏览器不认识，直接alert(screenX)，screenX 会看成一个为声明的
变量，致使不执行。那么必须将它将至为window 属性才能显示为初始化变量应有的值，所
以应该写成：alert(window.screenX)。

//跨浏览器的方法
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

窗口页面大小，Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性：innerWidth
和innerHeight，返回浏览器窗口自己的尺寸；outerWidth 和outerHeight，返回浏览器窗口本
身及边框的尺寸。

alert(innerWidth); //页面长度
alert(innerHeight); //页面高度
alert(outerWidth); //页面长度+边框
alert(outerHeight); //页面高度+边框

PS：在Chrome 中，innerWidth=outerWidth、innerHeight=outerHeight；
PS：IE 没有提供当前浏览器窗口尺寸的属性；不过，在后面的DOM 课程中有提供相
关的方法。
在IE 以及Firefox、Safari、Opera 和Chrome 中，document.documentElement.clientWidth
和document.documentElement.clientHeight 中保存了页面窗口的信息。
PS：在IE6 中，这些属性必须在标准模式下才有效；若是是怪异模式，就必须经过
document.body.clientWidth 和document.body.clientHeight 取得相同的信息。

//若是是Firefox 浏览器，直接使用innerWidth 和innerHeight
var width = window.innerWidth; //这里要加window，由于IE 会无效
var height = window.innerHeight;
if (typeof width != 'number') { //若是是IE，就使用document
if (document.compatMode == 'CSS1Compat') {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; //非标准模式使用body
height = document.body.clientHeight;
}
}

PS：以上方法能够经过不一样浏览器取得各自的浏览器窗口页面可视部分的大小。
document.compatMode 能够肯定页面是否处于标准模式，若是返回CSS1Compat 即标准模式。

//调整浏览器位置
moveTo(0,0); //IE 有效，移动到0,0 坐标
moveBy(10,10); //IE 有效，向下和右分别移动10 像素
//调整浏览器大小
resizeTo(200,200); //IE 有效，调正大小
resizeBy(200,200); //IE 有效，扩展收缩大小

PS：因为此类方法被浏览器禁用较多，用处不大。

4.间歇调用和超时调用
JavaScript 是单线程语言，但它容许经过设置超时值和间歇时间值来调度代码在特定的
时刻执行。前者在指定的时间事后执行代码，然后者则是每隔指定的时间就执行一次代码。
超时调用须要使用window 对象的setTimeout()方法，它接受两个参数：要执行的代码
和毫秒数的超时时间。

setTimeout("alert('Lee')", 1000); //不建议直接使用字符串
function box() {
alert('Lee');
}
setTimeout(box, 1000); //直接传入函数名便可
setTimeout(function () { //推荐作法
alert('Lee');
}, 1000);

PS：直接使用函数传入的方法，扩展性好，性能更佳。

调用setTimeout()以后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID
是计划执行代码的惟一标识符，能够经过它来取消超时调用。
要取消还没有执行的超时调用计划，能够调用clearTimeout()方法并将相应的超时调用ID
做为参数传递给它。

var box = setTimeout(function () { //把超时调用的ID 复制给box
alert('Lee');
}, 1000);
clearTimeout(box); //把ID 传入，取消超时调用

间歇调用与超时调用相似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调
用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()
相同：要执行的代码和每次执行以前须要等待的毫秒数。

setInterval(function () { //重复不停执行
alert('Lee');
}, 1000);

取消间歇调用方法和取消超时调用相似，使用clearInterval()方法。但取消间歇调用的重
要性要远远高于取消超时调用，由于在不加干涉的状况下，间歇调用将会一直执行到页面关
闭。

var box = setInterval(function () { //获取间歇调用的ID
alert('Lee');
}, 1000);
clearInterval(box); //取消间歇调用

但上面的代码是没有意义的，咱们须要一个能设置5 秒的定时器，须要以下代码：

var num = 0; //设置起始秒
var max = 5; //设置最终秒
setInterval(function () { //间歇调用
num++; //递增num
if (num == max) { //若是获得5 秒
clearInterval(this); //取消间歇调用，this 表示方法自己
alert('5 秒后弹窗！');
}
}, 1000); //1 秒

通常认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，不多使用真
正的间歇调用，由于须要根据状况来取消ID，而且可能形成同步的一些问题，咱们建议不
使用间歇调用，而去使用超时调用。

var num = 0;
var max = 5;
function box() {
num++;
if (num == max) {
alert('5 秒后结束！');
} else {
setTimeout(box, 1000);
}
}
setTimeout(box, 1000); //执行定时器

PS：在使用超时调用时，不必跟踪超时调用ID，由于每次执行代码以后，若是再也不
设置另外一次超时调用，调用就会自行中止。

二．location对象
location 是BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了
一些导航功能。事实上，location 对象是window 对象的属性，也是document 对象的属性；
因此window.location 和document.location 等效。

alert(location); //获取当前的URL

 

 

 

location.hash = '#1'; //设置#后的字符串，并跳转
alert(location.hash); //获取#后的字符串
location.port = 8888; //设置端口号，并跳转
alert(location.port); //获取当前端口号，
location.hostname = 'Lee'; //设置主机名，并跳转
alert(location.hostname); //获取当前主机名，
location.pathname = 'Lee'; //设置当前路径，并跳转
alert(location.pathname); //获取当前路径，
location.protocal = 'ftp:'; //设置协议，没有跳转
alert(location.protocol); //获取当前协议
location.search = '?id=5'; //设置?后的字符串，并跳转
alert(location.search); //获取?后的字符串
location.href = 'http://www.baidu.com'; //设置跳转的URL，并跳转
alert(location.href); //获取当前的URL

在Web 开发中，咱们常常须要获取诸如?id=5&search=ok 这种类型的URL 的键值对，
那么经过location，咱们能够写一个函数，来一一获取。

function getArgs() {
//建立一个存放键值对的数组
var args = [];
//去除?号
var qs = location.search.length > 0 ? location.search.substring(1) : '';
//按&字符串拆分数组
var items = qs.split('&');
var item = null, name = null, value = null;
//遍历
for (var i = 0; i < items.length; i++) {
item = items[i].split('=');
name = item[0];
value = item[1];
//把键值对存放到数组中去
args[name] = value;
}
return args;
}
var args = getArgs();
alert(args['id']);
alert(args['search']);
location.assign('http://www.baidu.com'); //跳转到指定的URL
location.reload(); //最有效的从新加载，有可能从缓存加载
location.reload(true); //强制加载，从服务器源头从新加载
location.replace('http://www.baidu.com'); //能够避免产生跳转前的历史记录

三．history对象
history 对象是window 对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻
算起。

 

function back() { //跳转到前一个URL
history.back();
}
function forward() { //跳转到下一个URL
history.forward();
}
function go(num) { //跳转指定历史记录的URL
history.go(num);
}

PS：能够经过判断history.length == 0，获得是否有历史记录。