Javascript基础——BOM

BOM学习要点

BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。 BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以， BOM本身是没有标准的或者还没有哪个组织去标准它。

Window对象

BOM的核心对象是window， 它表示浏览器的一个实例。 window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

1、对象的属性和方法

window对象有一系列的属性，这些属性本身也是对象。
window对象的属性：

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); 					//返回值可以得到

3、新建窗口

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

<button id="id1">1</button>
<button id="id2">2</button>
<button id="id3">3</button>

window.onload = function() {
	document.getElementById('id1').onclick = function() {
		open('https://www.baidu.com/');
	}
	document.getElementById('id2').onclick = function() {
		open('https://www.baidu.com/', 'baidu');
	}
	document.getElementById('id3').onclick = function() {
		open('https://www.baidu.com/', '_parent');
	}
}

PS：不命名会每次打开新窗口，命名的第一次打开新窗口，之后在这个窗口中加载。窗口目标是提供页面的打开的方式，比如本页面，还是新建。
第三字符串参数：

4、窗口的位置和大小

用来确定和修改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,不支持的同上

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

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

alert(document.documentElement.clientWidth) 	//IE6
alert(document.documentElement.clientHeight) 	//IE6

5、间歇调用和超时调用

JavaScript是单线程语言，但它允许通过设置间歇时间值和超时值来调度代码在特定的时刻执行。超时在指定的时间过后执行代码，而间隙则是每隔指定的时间就执行一次代码。
超时调用需要使用 window对象的 setTimeout()方法，它接受三个参数：要执行的代码和毫秒数的超时时间，目标函数的入参支持对象类型。

function box(o) {
  document.write(o.str);
}
setTimeout(box,2000,{
  str:'传入的数据'       // 两秒后页面上显示“传入的数据”
});

使用超时调用实现循环：

var i = 1;
var p = document.getElementById('time');
function box() {
  p.innerHTML = i++;    // 对某对象插入内容，如 document.getElementById('time').innerHTML=i++; 这样就能向id为time的对象插入内容
  setTimeout(box,1000);
}
box();

当调用window的setTimeout()方法后会返回一个数值，可以通过clearTimeout()方法将相应的id传给它来清除任务。

var id = setTimeout(function() {
  document.write(1);
},5000);

document.getElemntById('btn').onclick = function() {
  clearTimeout(id);
}

间隙调用需要使用window的setInterval()方法，接受的参数同上清除任务时需要调用clearInterval()方法。

var p = document.getElementById('time');
var btn = document.getElementById('btn');
var i = 1;
function box(){
	p.innerHTML = i++;
}
var id = setInterval(box,1000);   // 每隔1秒time加1
btn.onclick=function(){
	clearTimeout(id);
}

location对象

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

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

location对象的属性：

location对象的方法：

alert(location.hash); 					//获取#后的字符串
alert(location.port); 					//获取当前端口号，
alert(location.hostname); 				//获取当前主机名，
alert(location.pathname); 				//获取当前路径，
alert(location.protocol); 				//获取当前协议
alert(location.search); 					//获取?后的字符串
location.href = 'http://www.baidu.com'; 	//设置跳转的URL，并跳转
alert(location.href); 					//获取当前的URL
location.assign('http://www.baidu.com'); 	//跳转到指定的 URL
location.reload(); 				//最有效的重新加载， 有可能从缓存加载
location.reload(true); 			//强制加载，从服务器源头重新加载
location.replace('http://www.baidu.com'); 	//可以避免产生跳转前的历史记录

history对象

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

history对象的方法：

function back() {      //跳转到前一个 URL
	history.back();
}

function forward() {   //跳转到下一个URL
	history.forward();
}

function go(num) {     //跳转指定历史记录的URL
	history.go(num);
}

PS：可以通过判断history.length==0，得到是否有历史记录。