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;

1

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

2

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

3

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

移动窗口

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属性