BOM（JavaScript高程笔记）

再次编辑于20160115

一、window对象

双重角色

JS访问浏览器窗口的接口
ECAMAscript规定的Global对象

1.全局作用域

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

delete的差别

直接在window对象上定义的属性可以delete，返回true
全局变量不能通过delete操作符删除（[configurable] = false）,返回false
IE<9在使用delete删除window属性时会抛出错误

访问未声明变量的差别

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

oldValue;         // 抛出错误

window.oldValue;  // 返回undefined

2.窗口关系和框架（frames）

略

3.窗口位置

IE、Opera、Safari、Chrome:::

screenLeft、screenTop
Firefox、Safari、Chorme:::

screenX、screenY

跨浏览器取得窗口相对于屏幕左边和上边的位置

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

                window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ?

                window.screenTop : window.screenY;

IE、Opera：不含浏览器工具栏，即

如果 window 对象是最外层对象，而且浏览器窗口紧贴屏幕最上端，则topPos=工具栏高度
Firefox、Safari、Chorme：与上相反，含工具栏

IE、Opera：返回当前frame相对屏幕的坐标
Firefox、Safari、Chorme：始终返回页面中每个框架的 top.screenX 和

top.screenY 值

然并卵，以上方法无法实现跨浏览器获取窗口精准坐标值...

移动窗口

moveTo(x, y);  //参数：新位置的x、y坐标

moveBy(x, y);  //参数：x、y方向上移动的像素

这两个方法可能会被浏览器禁用，在 Opera 和 IE 7（及更高版本）中默认就

是禁用的。
不适用于框架，只能对最外层的 window 对象使用。

4.窗口大小（兼容何解?）

跨浏览器取得页面视口的大小

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;

    }

}

改变窗口大小

resizeTo();

resizeBy();

这两个方法可能会被浏览器禁用，在 Opera 和 IE 7（及更高版本）中默认就

是禁用的。
不适用于框架，只能对最外层的 window 对象使用。

5.导航和打开窗口

window.open();

// 参数：URL、窗口目标、窗口特性、是否取代历史记录的布尔值

// 返回指向新窗口的引用，可对其调整大小或移动位置

window.close();

// 关闭用window.open()打开的窗口

top.close();

// 关闭弹出窗口自身

wroxWin.close();

alert(wroxWin.closed); // true

// 弹出窗口关闭之后，窗口的引用仍然还在，只可用于检测其 closed 属性

新窗口的opener属性

指向打开它(调用window.open())的原始窗口对象
设为null表示新窗口不需要与原始窗口通信，一旦切断联系，就无法恢复

弹窗屏蔽程序

var blocked = false;

try {

    var wroxWin = window.open("http://www.wrox.com", "_blank");

    if (wroxWin == null){

        blocked = true;

    }

} catch (ex){

    blocked = true;

}

if (blocked){

    alert("The popup was blocked!");

}

浏览器如有内置屏蔽程序阻止弹出窗口，则window.open()返回null
浏览器扩展或其他程序阻止弹出窗口，则window.open()抛出错误

6.超时调用和间歇调用、系统对话框

略

二、location对象

保存当前文档信息、能将URL解析为独立的片段

window.location == document.location;  // true

1.查询字符串参数

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;

}

2.位置操作

设置location.href（修改location的其他属性也可以改变当前页面，生成历史记录，除hash外页面都会以新URL重新加载）
location.replace("newHref") 位置改变，但不会生成历史记录，并不可后退
location.reload() 若页面未改变，则从浏览器缓存中重载，要强制从服务器重载则使用location.reload(true)。由于网络延迟或系统资源因素，reload()之后的代码可能不会执行，因此最好将reload()放在代码最后一行

三、 navigator对象

可用于检测浏览器类型

检测插件

非IE浏览器-plugins数组（refresh()方法）
IE浏览器-ActiveXObject类型，COM对象标识符

两种检测插件的方法差别太大，典型做法为针对每个插件分别创建检测函数

//检测插件（在 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 中的插件

function hasIEPlugin(name){

    try {

        new ActiveXObject(name);

        return true;

    } catch (ex){

        return false;

    }

}

//检测所有浏览器中的 Flash

function hasFlash(){

    var result = hasPlugin("Flash");

    if (!result){

        result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");

    }

    return result;

}

//检测所有浏览器中的 QuickTime

function hasQuickTime(){

    var result = hasPlugin("QuickTime");

    if (!result){

        result = hasIEPlugin("QuickTime.QuickTime");

    }

    return result;

}

注册处理程序

（不理解）

四、screen对象

五、history对象

开发人员无法得知用户浏览过的URL，但可以在不知道历史URL的情况下实现前进后退

go();  //参数：整数值、字符串，传递字符串会跳转到历史中包含该字符串的最近的位置

back();

forward();

length属性

巴特西