JavaScript高级程序设计读书笔记8

发表于 | 分类于 ，

第8章 BOM

window对象

  • window对象既是JS访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象

    全局作用域

  • 所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法
  • 全局变量不能通过delete操作符删除，直接在window对象上的定义的属性可以。
  • 尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。
  • var newValue=window.oldVlueoldValue为定义，newValue的值是undefined

    窗口关系及框架

  • 如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。
  • top对象始终指向最高（最外）层的框架，也就是浏览器窗口
  • parent对象始终指向当前框架的直接上层框架
  • self对象始终指向window
  • 在使用框架的情况下， 浏览器会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。
  • 由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。

    窗口位置

  • screenLeft（screenX）:表示窗口相对于屏幕左边的位置
  • screenTop(screenY):表示窗口相对于屏幕上边的位置

  • 通过以下代码可以跨浏览器取得窗口左边和上边的位置

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

  • 无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值

  • moveTo()和moveBy()方法可以跨浏览器地将窗口精确地移动到一个新位置
  • moveTo():接收新位置的x和y坐标值
  • moveBy():在水平和垂直方向上移动的像素数
  • moveTo()和moveBy()方法可能被浏览器禁用，且不适用于框架，只能对最外层window对象使用

窗口大小

  • 无法确定浏览器窗口本身的大小，但是可以取得页面视口的大小

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var pageWidth=window.innerWidth;
    var 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()方法可以调整浏览器窗口的大小

  • resizeTo():接收新窗口的宽度和高度
  • resizeBy():接收新窗口和原窗口的宽度与高度之差
  • resizeTo()和resizeBy()方法可能被浏览器禁用，且不适用于框架，只能对最外层window对象使用

    导航和打开窗口

  • winodw.open():导航一个特定的url,也可以打开一个新的浏览器窗口。
  • window.open()会返回一个指向新窗口的引用,可以像操作其他窗口一样操作新打开的窗口
  • close()方法仅适用于通过winodw.open()打开的弹出窗口，对于浏览器的主窗口，没有得到用户的允许不能关闭。
  • 新创建的window对象有一个opener属性，保存着打开它的原始窗口对象。
  • 在新创建的标签页opener设置为null,表示在单独的进程中运行新标签页，不需要与打开它的标签页通信。
  • 在弹出窗口被屏蔽时，就应该考虑两种可能性。

    1.如果浏览器内置的屏蔽程序阻止的弹出窗口，window.open（）会返回null值

1
2
3
4
var wroxWin=window.open("http://www.wrox.com","_blank");
if(wroxWin==null){
    alert("The popup was blocked!")
}

2.如果是浏览器扩展或其他程序阻止的弹出窗口，那么window.open通常会抛出一个错误。

1
2
3
4
5
6
7
8
9
10
11
12
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!");
}

间歇调用与超时调用

  • setTimeout():超时调用，在指定的时间过后执行代码。返回一个代表计划执行代码的唯一标识符ID，可以用clearTimeout(ID)来取消超时调用计划。
  • 超时调用的代码都是在全局作用域中执行的，函数中的this值在非严格模式下指向window对象，在严格模式下是undefiend。
  • setInterval()：间歇调用，按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。返回一个代表计划执行代码的唯一标识符ID，可以用clearTimeout(ID)来取消间歇调用计划。
  • 一般使用超时调用来模拟间歇调用，因为间歇调用可能会在前一个间歇调用结束之前启动，最好不要使用间歇调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    var num=0;
    var max=10;
    function incrementNumber(){
        num++;
        if(num<max){
            setTimeout(incrementNumber(),500);
        }else{
            alert("Done");
        }
    }
    setTimeout(incrementNumber(),500);

系统对话框

  • alert()、confirm()、prompt()都是同步的
  • alert():只有确认按钮

  • confirm():确认和取消按钮

    1
    2
    3
    4
    5
    if(confirm("1")){
        alert("yes");
    }else{
        alert("no");
    }

  • prompt():确认和取消按钮，还有一个文本框

    1
    2
    3
    4
    var result=prompt("what is your name","xyy");
    if(result!==null){
        alert("Welcome,"+result);
    }

  • window.print() window.find()异步显示，打印和查找

    location对象

  • location包含有关当前 URL 的信息。
  • window.location()和document.location()引用的是同一个对象

    查询字符串参数

  • 解析字符串，逐个访问其中的每个查询字符串参数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    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=item[i].split("=");
            //用decodeURIComponent分别解码name和value，因为查询字符串应该是被编码过的
            name=decodeURIComponent(item[0]);
            value=decodeURIComponent(item[1]);
            if(name.length){
                args[name]=value;
            }
        }
        return args;

    }

位置操作

  • location.assign(URL)可加载一个新的文档
  • location.replace(newURL)用一个新文档取代当前文档,不能用后退回到前一个页面
  • location.reload(force)重新加载当前文档
  • location.reload()有可能从缓存中加载
  • location.reload(true)强制从服务器加载
  • navigator包含有关浏览器的信息

    检测插件

  • 普通浏览器和IE中检测插件的方法不一样，所以一般针对每个插件分别创建检测函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    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;
    }
    //hasIEPlugin中的name是只接收一个COM标识符作为参数
    function hasIEPlugin(name){
        try{
            new ActiveXObject(name);
            return true;
        }catch(ex){
            return false;
        }
    }
    function hasFlash(){
        var result=hasPlugin("Flash");
        if(!result){
            result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
        }
        return result;
    }
    alert(hasFlash());

注册处理程序

  • Navigator.registerContentHandler()和registerProtocolHandler()可以让一个站点指明它可以处理特定类型的信息

screen对象

  • screen保存着与客户端显示器有关的信息，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等

history对象

  • history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
  • history.go() hitory.back() history.foeword()实现在历史记录中向后或向前导航到任意页面
  • history.length()保存历史记录的数量，对于加载到窗口、标签页或框架中国的第一个页面而言，history.length=0