总览
- BOM
- window对象
- 全局作用域
- 窗口
- 间歇调用和超时调用
- location对象
- navigator对象
- screen对象
- history对象
- window对象
window对象
这是BOM的核心
1.全局作用域
在全局作用域中声明的变量、函数都是window的属性和方法
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
全局变量不能用delete删除，但是直接在window上定义的属性可以
var age = 29;
window.color = "red";
//在IE < 9 时抛出错误，在其他所有浏览器中都返回false
console.log(delete age);
//在IE < 9 时抛出错误，在其他所有浏览器中都返回true
delete window.color; //returns true
console.log(age); //29
console.log(window.color); //undefined
2.窗口
window.frames中保存着框架的集合
- 窗口位置
screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。
跨浏览器取得窗口左边和上边的位置
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。不同的浏览器返回的值有所不同。在IE9+、Safari 和Firefox中，outerWidth 和outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的window 对象还是从某个框架访问）。在Opera 中，这两个属性的值表示页面视图容器的大小。而innerWidth 和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。在Chrome 中，outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小。在IE6 中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth 和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;
}
}
- 导航和打开窗口
window.open(url)在新窗口中打开连接
var wroxWin=window.open("http://www.wrox.com/","_blank",
"height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.opener = null;禁止老窗口和新窗口通信
- 间歇调用和超时调用
很重要，详情参见setTimeout和setInterval
2.location对象
提供与当前窗口中加载文档有关的信息，还提供了一些导航功能。location对象既是window的属性也是document对象的属性。window.location和document.location指向同一个对象。location姑且认为是URL。
- 查询字符串参数
查询字符串参数的栗子。借助location.search获取到URL[？s=b&v=f...#）之间的内容('['取，'）'不取)
function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args 对象中
for (i=0; i < len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
- 位置操作
location很多方式可以改变浏览器的位置，assign(url)方法在浏览器中生成一条记录，可以使用后退按钮导航到前一个页面。但是replace(url)方法不能后退到前一个页面。reload()作用是重新加载当前显示的页面
location.assign(''http://www.baidu.com")
//下面两句相当于隐式调用assign()方法。
window.location=''http://www.baidu.com"
location.href=''http://www.baidu.com"
//不能后退到前一个页面
location.replace(''http://www.baidu.com")
navigator对象
提供浏览器详细信息
- 检测插件
对于非IE 浏览器，可以使用plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。 - name：插件的名字。
- description：插件的描述。
- filename：插件的文件名。
- length：插件所处理的MIME 类型数量。
//非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;
}
在IE 中检测插件的唯一方式就是使用专有的ActiveXObject 类型，并尝试创建一个特定插件的实例。IE 是以COM对象的方式实现插件的，而COM对象使用唯一标识符来标识。因此，要想检查特定的插件，就必须知道其COM标识符。
function hasIEPlugin(name){
try{
new ActiveXObject(name)
return true
}catch(ex){
return false
}
}
screen对象
提供用户显示器分辨率详细信息
history对象
保存在用户历史记录信息。
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的wrox.com 页面
history.go("wrox.com");
//跳转到最近的nczonline.net 页面
history.go("nczonline.net");
//后退一页
history.back();
//前进一页
history.forward();
history 对象还有一个length 属性，保存着历史记录的数量。
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}
参考资料：JavaScript高级程序设计（第3版）
网友评论