JS高级程序设计--读书笔记(BOM对象)

1,window对象
BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中，window对象有双重角色，‘它既是通过Javacript访问浏览器的一个接口，又是ECMAScript规定的Global对象。
<1>全局作用域
所有在全局作用域中声明的变量函数都会变成window对象的属性与方法。如下：
function say(){
alert("hello");
}
window.say();//hello
全局变量与window属性区别：全局变量不能通过delete操作符删除，而window属性可以。例如：
var age=20;
window.color="red";


delete window.age;//return false;


delete window.color;//return true;
<2>窗口与框架关系：
如果页面中包含框架，则每个框架都有自己的window属性，并且包含在frames集合中。在frames集合中可以通过数值索引(从0开始)来访问相应的window对象。
<3>窗口位置：
--ie,safari,opera和chrome都有screenLeft和screentop属性。firefox则是screenX和screenY。跨浏览器取得窗口左边与上边位置：


var leftPos=(typeof window.screenLeft=="number")?
window.screenLeft:window.screenX;


var topPos=(typeof window.screenTop=="number")?
window.screenTop:window.screenY;
<4>窗口大小
--innerWidth,innerHeight,outerWidth,outerHeight


outerWidth和outerHeight返回的是浏览器窗口本身的尺寸，innerWidth和innerHeight返回的是页面视图的大小(减去边框值);在ie，firefox，safari和chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视图的信息。
在ie6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWith和document.body.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;
}
}
2,location对象
location对象是最有用的BOM对象之一，它既是window对象的属性，也是document对象的属性。window.location与document.location引用的是同一个对象。
location对象的用处不止表现在它保存当前的文档，还表现在它将url解析为独立的片段。下表为location对象所有属性：


hash 返回url中的hash，如果url中不包含散列，则返回空字符串
host 返回服务器名称与端口号
hostname 返回不带端口号的服务器名称
href 返回当前加载页面的完整url
pathname 返回url的目录和文件名
port 返回端口号
protocol 返回页面使用协议。通常是http:或https:
位置操作：
使用location对象可以通过很多方式改变浏览器的位置。最常用的方式，如下：
location.assign("url");
这样，可立即打开新url的路径。
直接修改location的属性也可以更改url。