Javascript之 BOM

Window对象

表示一个浏览器的实例，它既是通过Js访问浏览器的一个接口，又是ECMAScript规定的Global对象。

在网页中定义的任何一个变量、对象、函数，都以window作为其Global对象。

全局作用域

由于window对象为ECMAScript中的Global对象，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

直接定义变量与在window上定义变量的差别：全局变量不能通过delete操作符删除，而直接在window对象上定义的可以

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

var newValue = oldValue;   // error, oldValue is not undefined
var newValue = window.oldValue;   // 不会报错，因为这是一次属性查询

窗口关系及框架

如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。

通过代码访问框架的六种方式：

window.frames[ index ];
window.frames[ name ];
top.frames[ index ];     // 建议使用
top.frames[ name ];      // 建议使用
frames[ index ];
frames[ name ];

parent对象：始终指向当前框架的直接上层框架，在某些情况下有可能等于top，在没有框架的情况下一定等于top。

self对象：它始终指向window，self和window可以互换使用。

使用框架的情况下，浏览器会存在多个Global对象。每个框架中定义的全局变量也会成为各自框架中window对象的属性，因此每个框架都有一套自己的构造函数，一一对应，但不相等。

窗口位置

screenLeft属性：获取窗口相对于屏幕左边的位置

screenTop属性：获取窗口相对于屏幕上边的位置

screenX属性：获取窗口相对于屏幕左边的位置

screenY属性：获取窗口相对于屏幕上边的位置

兼容代码：

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

窗口大小

innerWidth、innerHeight属性：该容器中页面视图区的大小（减去边框宽度）

outerWidth、outerHeight属性：返回浏览器窗口本身的尺寸

调整浏览器窗口的大小：

resizeTo(width, height)：浏览器窗口的新尺寸

resizeBy(width, height)：新窗口与原窗口尺寸差

导航和打开窗口

window.open(URL[, Target, String, Boolean]);：导航到一个特定的URL或者打开一个浏览器窗口。

URL：要加载的URL地址

Target：窗口目标

• 窗口或框架的名称，没有则新建
• _self：URL替换当前页面
• _parent：URL替换父框架
• _top：URL替换任何可加载的框架集
• _blank：URL加载到一个新的窗口[默认]

String：一个特性字符串

设置	说明
channelmode=yes|no|1|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes|no|1|0	是否显示地址字段.默认值是yes
menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

Boolean：新页面是否取代浏览器历史记录中当前页面加载的布尔值

窗口引用与关闭

var wroxWin = window.open( ... );      //返回一个指向新窗口的引用
wroxWin.resizeTo(100,100);             //对窗口大小可以直接进行调整
wroxWin.close();                       //window.close();方法可以关闭打开的窗口

opener属性：保存打开它的原始窗口对象。

将opener属性设置为，即表示在单独的进程中运行标签页

弹出窗口屏蔽程序

1. 浏览器内置程序屏蔽：window.open( ... );返回。
2. 浏览器扩展程序屏蔽：window.open( ... );返回error。

要判定弹出窗口是否被屏蔽，必须在检测返回值的同时，将对window.open();的调用封装在一个try-catch块中。

间歇调用和超时调用

超时调用：setTimeout(code, Time)方法。

• code：执行的代码（字符串或者是函数）
• Time：以毫秒表示的时间（执行代码需要等待的时间）

Javascript是一个单线程的解释器，因此一定时间内只能执行一段代码，所以setTimeout()方法的实质含义是：告诉JS再过多长时间把当前的任务添加到队列中。

如果队列是空的，代码立即执行；如果不是空的，则按顺序执行。

返回值：

var timeoutId = setTimeout( ... );

调用setTimeout()方法，会返回一个数值ID，表示超时调用，这个超时调用是计划执行代码唯一的标识符，可以用它来取消超时调用。

clearTimeout(timeoutId);            //取消超时调用

间歇调用：setInterval(code, Time)方法。

• code：执行的代码（字符串或者是函数）
• Time：以毫秒表示的时间（代码循环执行的时间间隔）

取消间歇调用：

var intervalId = setInterval( ... );
clearInterval(intervalId);

系统对话框

“警告”对话框：alert( ... ); [只有一个确定按钮]

"确认"对话框：var bool = confirm( ... );[确认和取消两个按钮]

"提示"对话框：prompt(string [,default]);[输入框及确认取消两个按钮]

打印对话框：window.print();

查找对话框：window.find();

location对象

既是window对象的属性，又是document对象的属性，所以**window.location == document.location**

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

查询字符串参数

对location.search();中返回的字符串进行切片：

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.search返回的字符串，并返回一个包含字符串内所有键值对的对象。

位置操作

location.assign(URL); ：打开新的URL并在浏览器的历史记录中生成一条记录。

使用window.location或location.href设置一个URL的值也会调用assign()方法。

window.location = "http://www.xuchao.cn";  ==  location.assign("http://www.xuchao.cn");
location.href = "http://www.xuchao.cn";    ==  location.assign("http://www.xuchao.cn");

location.replace(URL);：打开新的URL，但不会在历史记录中生成新记录，既不能返回。

location.reload( [true] );：重新加载当前显示的页面。

不传参数，页面从浏览器缓存中重新加载；传入true参数，页面强制从服务器重新加载。

navigator对象

属性或方法	描述
appCodeName	浏览器的名称。通常都是Mozilla，即使在非Mozilla浏览器中也是如此
appMinorVersion	浏览器的次级版本。
appName	完整的浏览器名称。
appVersion	浏览器的平台和版本信息，一般不与实际的浏览器版本对应。
cookieEnabled	表示cookie是否启用
javaEnabled()	表示当前浏览器中是否启用了Java
Language	返回当前浏览器的主语言。
mimeTyoes	在浏览器中注册的MIME类型数组
onLine	表示浏览器是否连接了因特网
platform	返回运行浏览器的操作系统平台。
plugins	浏览器中安装插件信息的数组。
systemLanguage	返回 OS 使用的默认语言。（仅IE 4.0+支持）
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。（仅IE 4.0+和Opera 7.0+支持）

检测插件

window.navigator.plugins属性，返回一个有关插件信息的数组。

• name：插件的名字
• description：插件的描述
• filename：插件的文件名
• length：插件所处理的MIME类型数量

检测非IE浏览器：

// 检测插件(非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浏览器：

// 检测插件(IE)
function hasIEPlugin(name) {
    try {
        new ActiveXObject(name);
        return true;
    } catch(ex) {
        return false;
    }
}
// 检测Flash
console.log(hasIEPlugin("shockwaveFlash.shockwaveFlash"));
// 检测QuiceTime
console.log(hasIEPlugin("QuiceTime.QuiceTime"));

screen对象

属性	说明	IE	Firefox	Safari/chrome	Opera
availHeight	屏幕的像素高度减系统部件高度之后的值（只读）	yes	yes	yes
availLeft	未被系统部件占用的最左侧的像素值（只读）		yes	yes
availTop	未被系统部件占用的最上方的像素值（只读）		yes	yes
availWidth	屏幕的像素宽度减系统部件宽度之后的值（只读）	yes	yes	yes	yes
bufferDepth	读、写用于呈现屏外位图的位数	yes
colorDepth	用于表现颜色的位数；多数系统都是32（只读）	yes	yes	yes	yes
deviceXDPI	屏幕实际的水平DPI（只读）	yes
deviceYDPI	屏幕实际的垂直DPI（只读）	yes
fontSmooth- ingEnabled	表示是否启用了字体平滑（只读）	yes
height	屏幕	yes	yes	yes	yes
left	当前屏幕距左边的像素距离		yes
logicalXDPI	屏幕逻辑的水平DPI（只读）	yes
logicalYDPI	屏幕逻辑的垂直DPI（只读）	yes
pixelDepth	屏幕的位深（只读）		yes	yes	yes
top	当前屏幕距上边的像素距离		yes
updateInterval	读、写以毫秒表示的屏幕刷新时间间隔	yes
width	屏幕的像素高度	yes	yes	yes	yes

history对象

保存着用户上网的历史记录。

history.go( intValue/String );方法：前进或后退页面。

history.go( -1 );：后退一页。

history.go( 1 );：前进一页。

history.go( "xucha0.cn" );：跳转到包含xucha0.cn最近的页面。

history.back();：后退一页。
history.forward();：前进一页。
history.length：保存历史记录数量。