浏览器常用对象简介

       所有浏览器通用的对象包括document、navigator、history、screen和location。document对象表示页面;history对象包含用户访问页面的历史信息;navigator对象包含浏览器的信息screen对象包含了客户端显示能力的信息location对象包含了当前页面的位置信息。但最常用的应该是window对象:

       1.window对象 

        window对象代表浏览器的框架或窗口,其中也包含了网页;它是全局对象,因而不用使用其名称来访问其属性和方法,比如alert()函数,其实就是window对象的alert()方法。故:

alert("Hello everyone");
window.alert("Hello everyone");

    上面两行代码效果完全相同。

window对象不但充当全局作用域,而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。与之对应,还有outerWidth和outerHeight属性,可以获取整个浏览器窗口的宽度和高度。如下:

alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);//内宽高;
alert('window outer size: ' + window.outerWidth + ' x ' + window.outerHeight);//整个浏览器宽高;

2.history对象

    history对象跟踪用户访问的每一个页面,这个页面列表通常被称为历史栈,它允许用户单击浏览器的“前进”,“后退”按钮来重新访问页面,与JavaScript的数组对象类型相似,也拥有length属性,使用它可以获得历史栈的页面个数。history对象有back()和go()方法,用户单击浏览器的“前进”,“后退”按钮来重新访问页面的功能就可以用back()和go()方法来实现。在back()和go()方法的括号中有一个参数,我们就通过这个参数来访问历史栈中往前、往后的页面,如下:

history.go(-2);//向后退两个页面;
history.go(3);//向前进三个页面;

 back()方法用法与go()类似,只是前进、后退方向与go()方法相反。

3.location对象

    location对象包含了大量与当前页面相关的有用信息。它不仅包含了页面的统一资源定位器(URL),还包含了保存了页面的服务器、链接服务器的端口号及所使用的协议。分别可以通过location对象的herf、hostname、port和protocol属性获得这些信息。

除此之外,使用location对象的方法还可以改变当前页面的位置,或者刷新页面。可以采用两种方式导航到另一个页面,例如,要用myPage页面替换当前页面:

window.location.replace("myPage.html");//使用replace()方法
window.location.herf="myPage.html";//使用设置herf属性的方法

 由于window对象是全局的,因此上面代码也可以这样写:

location.replace("myPage.html");//使用replace()方法
location.herf="myPage.html";//使用设置herf属性的方法;

4.navigator对象

    navigator对象是window对象的属性它包含了浏览器和运行浏览器的操作系统的大量信息。他最常用的属性有:navigator.appName:浏览器名称,navigator.appVersion:浏览器版本,navigator.language:浏览器设置的语言,navigator.platform:操作系统类型,navigator.userAgent:浏览器设定的User-Agent字符串。

5.screen对象

对象表示屏幕的信息,常用的属性有:screen.width:屏幕宽度(以像素为单位),screen.height:屏幕高度(以像素为单位),screen.colorDepth:返回颜色位数,如8、16、24

6.document对象

document对象也是最常用的对象之一,但不同浏览器的document对象存在较大的差异,但它依然有一些同于的属性和方法,比如write()方法和bgcolor()方法,使用方法也很简单:

document.bgColor="red';//设置页面背景色为红色
document.write("this is red color ");//在页面上显示字符串"this is red color "

以上只是对浏览器的简要介绍,仅供了解。 

猜你喜欢

转载自1176052997.iteye.com/blog/2325476