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';
}
}
}