JavaScript高级程序设计笔记(9)-BOM

ECMAScript是Javascript的核心，但在Web中使用Javascript，那么BOM则是真正的核心。

window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，它既是通过Javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

全局作用域

var age = 18;
function sayAge(){
	alert(this.age);
}
alert(window.age);//18
sayAge();//18
window.sayAage();//18

在全局作用域中定义的变量和函数，自动归在了window对象名下。

但是，定义全局变量与在window对象上直接定义属性还是有一点差别：全部变量不能通过delete操作符删除，而在window对象上定义的属性和可以。

var age = 18;
window.color = 'red';

delete window.age;//IE<9，报错，其他返回false

delete window.color;//IE<9，报错，其他返回true

alert(window.age);//18
alert(window.color);//undefined

窗口关系及框架

窗口位置

IE、Safari、Opera和Chrome提供了screenLeft和screenTop属性，分别表示用于表示窗口相对于屏幕左边和上边的位置。FireFox则在screenX和screenTop属性中提供相同的窗口位置信息，Safari和Chrome也同时支持这连个属性。

moveTo()与moveBy()方法有可能将窗口精确地移动到一个新位置。两个方法都接收两个参数，其中，moveTo()接收的是新位置的x和y坐标值，而moveBy()接收的是水平和垂直方向上移动的像素数。这两个方法有可能被浏览器禁用，而且都不适用与框架，只能对最外层的window对象使用。

window.moveTo(0, 0);
window.moveTo(0, 100);

window.moveBy(200, 300);
window.moveBy(-50, 0);

窗口大小

IE9+、FireFox、Safari、Opera和Chrome均为此提供了四个属性：innerWidth、innerHeight、outerWidth、outerHeight。

在IE9+、Safari和FireFox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层window对象还是从某个框架访问）。innerWidth和innerHeight则表示该容器中页面视图的大小（减去边框宽度）。
在Chrome中，outerWidth、outerHeight与innerWidth、innerHeight返回相同的值，即视口大小，而非浏览器窗口大小。
在IE、FireFox、Safari、Opera和Chrome中， document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口信息。IE6中，这些属性必须在标准模式下才生效；如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。对于混杂模式下的chrome浏览器，无论是document.documentElement还是document.body的clientWidth和clientHeight属性，都可以获得视口大小。

var pageWidth = window.innerWidth;
	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;
	}	
}

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度， resizeBy()接收新窗口与原窗口的宽度和高度之差。

//调整到100 * 100
window.resizeTo(100, 100);

//调整到200 * 150
window.resizeBy(100,50);

导航和打开窗口

window.open():接收四个参数-要加载的url、窗口目标、一个特性字符串以及一个标识新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
如果window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的url。此外第二个参数也可以是任何一个特殊的窗口名称：_self、_parent、_top或_blank。

弹出窗口

1	window.open('http://jiaochunxiao.github.io','_blank','height=400,width=400,top=60,left=60,resize=yes');

调用close()方法可以关闭新打开的窗口。这方法仅适用于通过window.open()打开的弹出窗口。对于浏览器的住窗口，如果没有得到用户允许是不能关闭它的。

新创建的window对象都有一个opener属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象（top）中有定义，而且指向调用window.open()的窗口或框架。

1 2	var newWin = window.open('http://jiaochunxiao.github.io','newWin','height=400,width=400'); alert(newWin.opener == window);//true

有些浏览器会在独立的进程中运行每个标签页，当一个标签页打开另一个标签页，如果两个window对象需要彼此通信，那么新标签也就不能运行在独立的进程中。在chrome中，将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页。

1 2	var newWin = window.open('http://jiaochunxiao.github.io','newWin','height=400,width=400'); newWin.opener = null;

将opener属性设置为null，就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可在独立进程中运行。标签页之间一旦切断，将没有办法恢复。

弹出窗口屏蔽

var blocked = false;
try{
	var newWin = window.open('http://jiaochunxiao.github.io', '_blank');
	if(newWin == null){
		blocked = true;
	}
}catch(e){
	blocked = true;
}
if(blocked){
	alert('弹窗被屏蔽掉了');
}

间歇调用和超时调用

//不建议
setTimeout('alert("hello world")', 1000);

//推荐
setTimeout(function(){
	alert('hello world');
}, 1000)

var timeoutId = setTimeout(function(){
	alert('hello world');
}, 1000);

//取消
clearTimeout(timeoutId);

setTimout代码在全局作用域中执行，因此函数的this在非严格模式下指向window对象，严格模式下是undefined。

var num = 0;
var max = 10;
var intervalId = null;
function increamentNumber(){
	num ++;
	if(num == max){
		clearInterval(intervalId);
		alert('done');
	}
}

intervalId = setInterval(incrementNumber, 500);

系统对话框

alert()/confirm()/prompt()/print()/find()

var con = confirm('确定关闭吗？');
if(con){
	alert("确定关闭");
}else{
	alert("取消关系");
}

var pro = prompt('你的姓名？');
if(pro != null){
	alert('welcom ' + pro);
}else{
	alert('你没有输入名字');
}

location对象

location既是window对象的属性，也是document对象的属性。
location对象的所有属性：

属性名	例子	说明
hash	‘#content’	返回url中的hash(#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host	‘http://jiaochunxiao.github.io:80'	返回服务器名称和端口号(如果有)
hostname	‘http://jiaochunxiao.github.io'	返回不带端口号的服务器名称
href	‘http://jiaochunxiao.github.io'	返回当前加载页面的完整url。而location对象的toString()方法也返回这个值。
pathname	“/file/page”	返回url中的目录和文件名
port	“8080”	返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
protocol	“http:”	返回页面使用的协议。通常是http:或https:
search	“?name=’test’”	返回url的查询字符串，这个字符串以问号开头。

查询字符串参数

function getQueryStringArgs(){
	var qs = (location.search.length > 0 ? location.search.substring(1): ''),
	args = {},
	items = qs.length? qs.split('&'): [],
	item = null,
	name = null,
	value = null,
	i = 0,
	len = items.length;
	for(i; i < len; i++){
		item = items[i].split('=');
		name = decodeURIComponent(item[0]);
		value = decodeURIComponent(item[1]);
		if(name.length){
			args[name] = value;;
		}
	}
	return args;
}

位置操作

assign()方法：改变浏览器的位置，接收一个url参数。

location.href或window.location设置为一个url，也会以该值调用assign()方法。下面两种方式与显示

1
2
3

window.location = 'http://jiaochunxiao.github.io';

location.href = 'http://jiaochunxiao.github.io';

location的属性可以修改，每次修改后（hash除外），页面都以新的url重新加载。

通过上述任一方式修改url后，浏览器的历史记录中会生成一条新记录，因此用户通过后退按钮可导航到前一页面。要禁用这种行为，可以使用replace()方法。该方法接收一个url作为参数。浏览器位置改变，但不会在历史记录中产生新记录。

reload()重新加载当前显示的页面。

1 2	location.reload();//重新加载，又可能从缓存中加载 location.reload(true);//重新加载，从服务器重新加载

navigator对象

appCodeName: 浏览器名称，通常是Mozilla。
appName: 完整的浏览器名称
appVersion: 浏览器版本
cookieEnabled: 表示cookie是否启用
geolocation: 地理位置信息
language: 浏览器语言
javaEnabled: 浏览器是否启用了java
mimeTypes: MIME类型数组
onLine: 是否连接到网络
platform: 浏览器所在系统平台
plugins: 浏览期插件
product: 产品名称
productSub: 次要信息
userAgent: 浏览器的用户代理字符串
vendor: 浏览器品牌
vendorSub: 供应商次要信息

screen对象

history对象

go()方法可以用在用户的历史记录中任意跳转，可以向前，可以向后。接收一个参数，负数表示向后跳转，类似点击浏览器后退按钮去，正数表示向前，类似前进按钮。也可以向go()方法传递一个字符串参数，可能前进可能后退，如果历史记录中不包含该字符串，就什么都不做。
另外可以使用back()和forward()来代替go()。模拟浏览器的后退和前进按钮。