JavaScript学习笔记（九）---- BOM

标签：style   blog   http   color   os   io   使用   java   ar   

• window对象----BOM的核心
• 控制窗口、框架和弹出窗口
• 利用location对象中的页面信息
• 使用navigator对象

（一）window对象

在浏览器中，window对象有双重角色：既是通过Javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

1.全局作用域

在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

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

View Code

 　　注意两点：

　　1）定义全局变量与window对象上直接定义属性的差别　　

var age = 29;
window.color = "red"; 

• 全局变量不能通过delete操作符删除

var deleAge = delete window.age;
alert(deleAge); //false
alert(window.age); //29

• 直接在window对象上定义的属性可以使用delete操作符删除

var deleColor = delete window.color;
alert(deleColor); //true
alert(window.color); //undefined

使用var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此不可以通过delete操作符删除。

　　　2）尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。　　　

var newValue = oldValue;
alert(newValue); //ReferenceError: oldValue is not defined

var newValue = window.oldValue;
alert(newValue); //null

2.窗口关系及框架

3.窗口位置

• screenLeft 和 screenTop属性

　　　分别表示窗口相对与屏幕左边和上边的位置。IE、Safari、Opera和Chrome提供了该属性。

• screenX 和screenY属性 

　　　Firefox提供了该属性，Safari和Chrome也同时支持这个属性。

　　兼容性考虑：跨浏览器取得窗口左边和上边的位置代码，如下

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

alert("LeftPos:"+ leftPos); //0
alert("TopPos:"+ topPos); //0

4.窗口大小

跨浏览器确定一个窗口的大小不是一件简单的事。

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

• outerWidth 和 outerHeight

　　　在IE9+、FireFox 和 Safari 中，返回浏览器窗口本身的尺寸。

　　　在Opera中，这两个属性的值表示页面视图容器的大小。

• innerWidth 和 innerHeight

　　  表示该容器中页面视图区的大小（减去边框宽度）。

• document.documentElement.clientWidth 和 document.documentElement.clientHeight 

　　　在IE、Firefox、Safari、Opera 和 Chrome中，取得页面视口的大小。

• document.body.clientWidth和clientHeight

　　　在混杂模式下的Chrome，通过该属性取得视口的大小。

取得视口大小的代码：

document.compatMode 用来判断当前浏览器采用的渲染方式；CSS1Compat表示标准兼容模式开启，BackCompat表示标准兼容模式关闭

var pageHeight = window.innerHeight;
var pageWidth = window.innerWidth;
//alert(pageHeight +" "+ pageWidth); //undefined undefined

//alert(document.compatMode); //CSS1Compat
if(typeof pageHeight !="number"){    
    if(document.compatMode == "CSS1Compat"){ 
        pageHeight = document.documentElement.clientHeight;
        pageWidth = document.documentElement.clientWidth;
    }else{
        pageHeight = document.body.clientHeight;
        pageWidth = document.body.clientWidth;
    }
}
    
alert("Height:"+pageHeight+"; Width:"+pageWidth);    //Height:402;Width:954

JavaScript学习笔记（九）---- BOM

标签：style   blog   http   color   os   io   使用   java   ar   

原文地址：http://www.cnblogs.com/yanyangbyou/p/3962252.html