Javascript高级程序设计第二版第八章--BOM--笔记

 

8.1 window对象

window有双重的角色，既可以通过JavaScript访问浏览器窗口的接口，又是ECMAScript规定的Global对象。

8.1.1 全局作用域

var age = 29;

function sayAge(){

         alert(this.age);

}

alert(window.age); //29;

sayAge(); //29;

8.1.2 窗口关系及框架

如果页面中有frames，则每个frames都拥有自己的window对象，并且保存在frames对象中。

可以用window.frames[0]或者window.frames[framesName]来引用框架

8.1.3 窗口的位置

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

moveBy():接收在水平和垂直方向上移动的像素数

8.1.4 窗口大小

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

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

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;

}

}

FireFox,Safari,Opera和Chrome有4个属性：innerWidth,innerHeight,outerWidth,outerHeight。在Safari和FireFox,outerWidth和outerHeight返回浏览器窗口本身的尺寸。Opera中这两个属性表示页面视图容器的大小。而innerWidth和innerHeight表示该容器中页面视图区的大小。在Chrome中，outerWidth,outerHeight与innerWidth,innerHeight返回的相同的值，即视口的大小而非浏览器窗口的大小。

在ie6标准模式下：document.documentElement.clientWidth, document.documentElement.clientHeight这两个值有效，而在混杂模式下：则通过document.body.clientWidth，document.body.clientHeight,而在chrome下这两种方式都可以取得相同的值。

8.1.5 导航和打开窗口

window.open();

8.1.6 间歇调用和超时调用

setTimeout(),setInterval();

8.1.7 系统对话框

alert(),confirm()和prompt();

8.2 location对象

location是一个特别的对象，因为它既是window的属性，也是document的属性，换句话说，window.location和document.location引用的同一个对象。

8.2.1 查询字符串参数

location.search返回从问号到URL末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。

8.2.2 位置操作

一般使用location.href()

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

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

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

8.3 navigator对象

navigator是最早有Netscape Navigator 2.0引入的，但现在已经成为识别客户端浏览器的事实标准。

8.3.1 检测检查

name: 插件的名字

description:插件的描述

filename:插件的文件名

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

//检测插件(在ie中无效)

function hasPlugin(name){

         name = name.toLowerCase();

         for(var i=0; i<navigatior.plugins.length; i+){

         if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){

                   return true;

         }

}

return false;

}

//检测FLASH

alert(hasPlugin(‘FLASH’));

 

function hasIEPlugin(name){

         try{

         new ActiveXObject(name);

} catch(ex){

         return false;

}

}

//检测FLASH

alert(hasPlugin(‘ShockwaveFlash.ShockwaveFlash’));

8.3.2 注册处理程序

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

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

navigator.registerContentHandler(‘application/rss+xml’, ‘http://www.sohu.com?feed=%s’, ‘some Reader’);

FireFox 2.0 虽然实现了registerProtocolHandler，但该方法还不能用。

8.4 screen对象

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

8.5 history对象

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

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

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

history.go(‘sohu.com’);//跳转到最后的sohu页面

 

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

 

 

一个简单的应用：

 但是如果用到页面上对当前页面添加样式就派上用场了。

 比如：

 

演出与作品，是当前页面，需要添加样式，头部是程序里边共有的。

 这时候，

function  currentLink(){
     var  nav  =  document.getElementById( ' topnav ' );
     var  links  =  nav.getElementsByTagName( ' a ' );
     var  currenturl  =  window.location.href;
     for ( var  i = 0 ; i < links.length; i ++ ){
         var  linkurl  =  links[i].getAttribute( ' href ' );
         if (currenturl.indexOf(linkurl)  !=   - 1 ){
            links[i].parentNode.className  =   ' current_menu ' ;
        }
    }
}