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,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,如需转载请自行联系原作者

目录
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
49 0
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
48 2
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
3月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
2月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
44 0
|
3月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
38 1
|
4月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
138 1
|
4月前
|
JavaScript 前端开发
js bom的概念
js bom的概念
39 1
|
4月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
59 1