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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

嗯哼9925 2017-11-14 21:21:00 浏览821
展开阅读全文

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,OperaChrome4个属性:innerWidth,innerHeight,outerWidth,outerHeight。在SafariFireFox,outerWidthouterHeight返回浏览器窗口本身的尺寸。Opera中这两个属性表示页面视图容器的大小。而innerWidthinnerHeight表示该容器中页面视图区的大小。在Chrome中,outerWidth,outerHeightinnerWidth,innerHeight返回的相同的值,即视口的大小而非浏览器窗口的大小。

ie6标准模式下:document.documentElement.clientWidth, document.documentElement.clientHeight这两个值有效,而在混杂模式下:则通过document.body.clientWidthdocument.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.locationdocument.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.0navigator新增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';
        }
    }
}
复制代码

 



本文转自豪情博客园博客,原文链接:http://www.cnblogs.com/jikey/archive/2010/10/10/1807850.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
嗯哼9925
+ 关注