第8章 BOM

window对象
BOM的核心对象是windowd对象，在浏览器中，window就是ECMAScript定义的Global对象.
定义全局变量与在window对象上直接定义属性还是有点区别：

IE<9报错  全局变量不能delete删除
var age =29;
window.color="red"
delete window.age	return false
delete window.color //   return true
尝试访问未声明的变量会抛出错误
var newValue=oldValue;  //未定义会报错
var newValue=window.oldValue; //undefiend

frame框架
每个框架都有自己的window对象并且保存在frames集合中。
top对象也是window对象，始终指向最外层框架
parent指向上一层框架。

窗口位置
IE Operra只支持screenLeft screenTop 起点为浏览器工具栏
Chrome Firefox Safari 支持screenLeft screenTop screenX screenY 起点为整个窗口
无法解决跨浏览器获得坐标的问题
可以将窗口精准移动到新位置，但是基本被禁用（moveTo() moveBy() ）

窗口大小
IE9+及其他浏览器提供了4个属性值
innerWidth innerHeight outerWidth iouterHeight
Chrome inner和outer 返回值一样，即视口（viewport）大小非浏览器窗口大小
其他浏览器 outer返回浏览器本身尺寸，inner返回页面视图区大小（减去边框宽度）

IE8及更早版本及其他浏览器能通过DOM获取页面视口的信息
document.documentElement.clientWidth
document.documentElement.clientHeight

IE6混杂模式只能
document.body.clientWidth
document.body.clientHeight

获取页面视口大小
var pageWidth=window.innerWidth;
var 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
	}
}

移动设备
innerWidth和innerHeight 可见视口（可以看见的窗口大小）
IE中（可见视口） 其他（布局视口）
document.documentElement.clientWidth
document.documentElement.clientHeight
IE布局视口
document.body.clientWidth
document.body.clientHeight

调整窗口大小resizeTo() resizeBy()

弹出窗口屏蔽程序（避免报错）
弹出窗口被种种原因屏蔽会抛出错误

var blocked =false;
try{
	var wroxWin=window.open("http://www.baidu.com","_black")
}catch(ex){
	var blocked =true;
}

if(blocked ){
	alert("弹出窗口被屏蔽");
}

间歇调用和超时调用
setTimeout() setInterval()
clearTimeout() clearInterval()
在开发环境下，很少使用真正的间歇调用，原因后一个间歇调用可能会在前一个间歇调用结束之前启动。
可以使用以下代码替代

var num =0;
var max=10;
function incrementNumber(){
	num++;
	if(num==max){
		setTimeout(incrementNumber,500)
	}else{
		alert("Done")
	}
}
setTimeout(incrementNumber,500);

location对象
location对象既是window对象的属性，也是document对象的属性
window.location和document.location引用的是同一对象
location对象不仅保存当前文档的信息，还将URL解析为独立的片段

属性名	例子	说明
hash	“#contents”	返回URL中的hash（#后的字符串）
host	“www.baidu,com:80”	返回服务器名称和端口号
hostname	“www.baidu.com”	服务器名称
href	“http://www.baidu.com”	完整URL
pathname	“/login”	url中的目录或文件名
port	“8080”	URL中的端口号，如果不含则为Null
protocol	“http:”	使用的协议
search	“?id=1”	请求参数以?开头

查询参数

function getQueryStringArgs(){
	var qs=(location.search.length>0?location.search.substring(1):""),
	args={},
	items=qs.length?qs.split("&"):[];
	for(var i=0;i<items.length;i++){
		var item=items[i].split("=");
		var name=decodeURIComponent(item[0]);
		var value=decodeURIComponent(name.lengthitem[1]);
		if(name.length){
			args[name]=value;
		}
	}
	return args;
}
//假设字符串是？q=javascript&num=10
var args=getQueryStringArgs();
alert(args["q"]);
alert(args["num"]);

位置操作
location.href和window.location设置为一个url,都会调用Location.assign()方法立即打开一个新的URL并且在历史记录中产生一条新记录。

IE8+及其他浏览器修改location的属性都会在历史记录中产生一条新记录。

修改location的属性（除hash外）都会以新URL重新加载

以上方法修改URL后，历史记录都会生成新纪录，单机“后退”按钮会导航到前一个页面。要禁用这种行为可以使用replace()方法，不会产生新记录。

reload()默认使用最有效方式重新加载当前页面，如果需要强制可以传递参数true

navigator对象 属性方法表P210
navigator对象是识别客户端浏览器的事实标准。
属性：
appName 完整浏览器名称
appVersion 浏览器版本，一般不与实际的浏览器版本对应
language 浏览器主语言
plugins 插件数组

//检测插件  IE无效
function hasPlugin(name){
	name=name.toLowerCase();
	for(var i=0;i<navigator.plugins.length;i++){
	 if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){		
			return true;
      }
	}
	return false;
}
//检测Flash
alert(hasPlugin("Flash"));
//检测QuickTime
alert(hasPlugin("QuickTime"));

IE不支持Netscape式插件，只能使用ActiveXObject类型

//IE检测插件
function hasIEPlugin(name){
	try{
		new ActiveXObject(name);
		return true;
	}catch(ex){
		return false;
	}
	
}
//检测Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
//检测QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));

鉴于检测联众插件的方法差别太大，因此典型的做法是针对每个插件分别创建检测函数

function hasFlash(){
	var result=hasPlugin("Flash");
	if(!result){
		result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
	}	
	return result;
}
alert(hasFlash())

screen对象 不常用
history对象 基本用history.go()