《javascript高级程序设计2》学习笔记8 BOM

8.1 window对象

 BOM对象的核心是window，表示浏览器的一个实例。

在浏览器中，window既是javascript访问浏览器的一个接口，又是ECMAScript规定的global对象。

 

8.1.1 全局作用域

 

8.1.2 窗口关系和框架

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

可以通过window.frames[0]或window.frames[framesName]来引用。但最好使用top。

 

8.1.3 窗口位置

moveTo()  接收新位置的x和y坐标值

moveBy() 接收新位置的水平和垂直方向上移动的像素值

注：可能会被浏览器禁用

不适应框架，只能对最外层的window对象使用

 

8.1.4 窗口大小

 

  //取得页面视口大小的方法
         var pageWidth = window.innerWidth,
                pageHeight = window.innerHeight;
                
            if (typeof pageWidth != "number"){ //检查pageWidth保存的是否为数值
                if (document.compatMode == "CSS1Compat"){  //如果不是，检查document.compatMode确认页面是否处于标准模式
                    pageWidth = document.documentElement.clientWidth;
                    pageHeight = document.documentElement.clientHeight;
                } else {
                    pageWidth = document.body.clientWidth;
                    pageHeight = document.body.clientHeight;
                }
            }

            alert("Width: " + pageWidth);
            alert("Height: " + pageHeight);

risizeTo() 接收浏览器窗口的新宽度和高度

 

resizeBy() 接收新窗口与原窗口的宽度和高度之差。

注：可能会被浏览器禁用

不适应框架，只能对最外层的window对象使用

 

8.1.5 导航和打开窗口

 

window.open()调用close()方法可以关闭打开的窗口

wroxWin.close()

 

8.1.6 间歇调用和超时调用

setTimeout()

clearTimeout()

 

           //不要传递字符串，会影响性能
            setTimeout("alert('Hello world!') ", 1000);
            
            //推荐调用方式
            setTimeout(function() { 
                alert("Hello world!"); 
            }, 1000);

 

 

 

           //设置超时调用
            var timeoutId = setTimeout(function() {
                alert("Hello world!");
            }, 1000);
            
            //把它取消
            clearTimeout(timeoutId);

 

 

setInterval()

clearInterval()

 

8.1.7 系统对话框

alert()  接受一个字符串显示出来

confirm()  警告对话框，有确认取消选择

prompt()  提示框，提示用户输入文本

 

8.2 location对象

既是window对象的属性，也是document对象的属性 window.location==document.location

 

8.2.1 查询字符串参数

location.search返回从问号到url末尾的内容，不能逐个访问其中的每个查询字符串参数。

        function getQueryStringArgs(){
        
            //取得查询字符串并去掉开头的？
            var qs = (location.search.length > 0 ? location.search.substring(1) : "");
            
            //保存数据的对象
            var args = {};
            
            //取得每一项
            var items = qs.split("&");
            var item = null,
                name = null,
                value = null;
            
            //依次将每一项添加到args对象中
            for (var i=0; i < items.length; i++){
                item = items[i].split("=");
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                args[name] = value;
            }
            
            return args;
        }

        //假如查询字符串是 ?q=javascript&num=10
        
        var args = getQueryStringArgs();
        
        alert(args["q"]);     //"javascript"
        alert(args["num"]);   //"10"

 

 

8.2.2 位置操作

一般使用location.href()

但是通过location.href会是浏览器中生成一条新记录，因此用户单击“后退”按钮都会导航到前一个页面，要禁用这种行为，可以使用location.replace方法。

location.reload(); //重新加载(有可能从缓存中加载)

location.reload(true); //重新加载(从服务器重新加载);

最好将reload()放在代码的最后一行

 

8.3 navigator对象

识别客户端的事实标准

 

8.3.1 检测插件

非ie用plugins数组，包含的属性

name:插件名

description: 插件描述

filename: 插件的文件名

length: 插件所处理的MIME类型数量

 

//检测插件，在ie中无效
            function hasPlugin(name){   //要检查的插件名
                name = name.toLowerCase();  //将传入的名称转换为小写，方便比较
                for (var i=0; i < navigator.plugins.length; i++){//迭代plugins数组
                    if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                        //通过indexOf()检测每个name属性,以确认传入的name是否出现在字符串的某个地方避免混淆
                        return true;
                    }
                }
            
                return false;
            }
            
            //检测 flash
            alert(hasPlugin("Flash"));
            
            //检测 quicktime
            alert(hasPlugin("QuickTime"));
            
            //检测 Java
            alert(hasPlugin("Java"));

 

 

 

 //检测ie中的插件
            function hasIEPlugin(name){
                try {
                    new ActiveXObject(name);
                    return true;
                } catch (ex){
                    return false;
                }
            }
            
            //检测 flash
            alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
            
            //检测 quicktime
            alert(hasIEPlugin("QuickTime.QuickTime"));

 针对每个插件分别创建检测函数

 

           //检测所有浏览器中的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;
            }
            
            //检测 flash
            alert(hasFlash());
            
            //检测 quicktime
            alert(hasQuickTime());

 

8.3.2 注册处理程序

FireFox 2.0为navigator新增registerContentHandler 和 registerProtocolHandler 的方法。(这两个方法在html5中有定义)。可以让一个站点指明它可以处理特定类型的信息。

registerContentHandler接受三个参数：要处理的MIME类型、可以处理该MIME类型的页面的URL以及应用程序的名字。

 

8.4 screen对象

用处不是很大，主要存储浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。

 

//不一定所有环境有效
window.resizeTo(screen.availWidth, screen.availHeight);

 

8.5 history对象

用处不是很大，主要存储浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。

history.go(-1) | history.back(); //后退一页

history.go(1) | history.forward();//前进一页

history.go(n);//前进n页

history.go(‘baidu.com’);//跳转到最近的baidu页面     也可以使用back()和foward()代替

history还有一个length属性，保存着历史记录的数量。如果history.lenght 等于 0,那么应该是用户打开窗口后的第一个页面