JavaScript权威指南——窗口和框架

JavaScript权威指南——窗口和框架

对于浏览器来说，Window是界面的承载者，是表示浏览器的实例，也是客户端JS的全局对象。在浏览器的window对象中，比较重要的几个对象和方法：

 

Navigarot对象

它包含着web浏览器的整体信息，例如：浏览器名字、版本和运行的硬件平台等

使用

var navigatorObj = window.navigator;
// 或
var navigatorObj = navigator;

主要属性方法

• appName ：返回浏览器的名称。基于 Netscape 的浏览器中，返回的是 "Netscape"。在 IE 中，返回值为 "Microsoft Internet Explorer"。

• appVersion ：返回浏览器版本和平台信息。如：某个Chrome版本返回 "5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36"。

• geolocation ：返回一个Geolocation对象，可获取当前的地理信息。

• language ：返回浏览器界面语言。简体中文返回："zh-CN"。

• onLine ：返回浏览器是否可连接网络。

• platform ：返回浏览器所在的系统平台。如：Win32。

• userAgent ：返回由客户机发送服务器的 user-agent 头部的值。如："Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36".

Screen对象

存储了有关显示器的相关信息：例如：以像素为单位的屏幕宽高，以及每个像素的位数

主要属性方法：

• availHeight ：返回浏览器在屏幕的可用高度，单位px(像素)。可理解为浏览器最大化的高度，一般为屏幕高度减去上下系统任务栏或停靠栏。

• availWidth ：返回浏览器在屏幕的可用宽度，单位px(像素)。可理解为浏览器最大化的宽度，一般为屏幕宽度减去左右系统任务栏或停靠栏。

• colorDepth ：返回屏幕的颜色深度。颜色深度简单说就是最多支持多少种颜色,。一般是用“位”来描述的。比如BMP格式，则最多可以支持红、绿、蓝各256种，总共24位。所以颜色深度是24。

• height ：返回屏幕的高度，单位px(像素)。

• pixelDepth ：返回屏幕的色彩深度。

Location对象：

当前显示内容的url地址。

主要属性方法：

hash ：设置或返回当前页面URL中的的锚部分，包含开头的#符号。

如：www.baidu.com#top
loction.hase; // => 返回#top 

host ：设置或返回当前页面URL的主机名称和端口。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.host; // => 返回 'wenku.baidu.com:80'
location.host = 'www.baidu.com'; // 会让当前窗口访问 http://www.baidu.com/view/abc

hostname ：设置或返回当前页面URL的主机名称。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.hostname; // => 返回 'wenku.baidu.com'
location.hostname = 'www.baidu.com'; // 会让当前窗口访问 http://www.baidu.com:80/view/abc

href ：设置或返回当前页面完整的URL。若设置时不加协议，设置的字符串只是改变URL最后一个'/'之后的字符串。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.href; // => 返回 'http://wenku.baidu.com:80/view/abc'
location.href = 'www.baidu.com'; // 不加协议，会让当前窗口访问 http://wenku.baidu.com:80/view/www.baidu.com
location.href = 'http://www.baidu.com'; // 会让当前窗口访问 http://www.baidu.com

pathname ：设置或返回当前页面URL的路径部分。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.pathname; // => 返回 '/view/abc'
location.pathname = 'a.html'; // 修改路径的值，会让当前窗口访问 http://wenku.baidu.com:80/a.html

port ：设置或返回当前页面URL的端口。若当前URL没有端口，返回一个''(空字符串)。

protocol ：设置或返回当前页面URL的协议，最后面会有个':'冒号。

// 页面地址：http://www.baidu.com
location.protocol; // => 返回 'http:'
location.protocol = 'https:'; // 会让当前窗口访问 https://www.baidu.com

search ：设置或返回当前页面URL的查询部分(从问号 (?) 开始的 URL)。

// 页面地址：http://www.baidu.com?id=1&page=1
location.search; // => 返回 '?id=1&page=1'
location.protocol = '?id=1&page=1'; // 会让当前窗口访问 http://www.baidu.com?id=1&page=1
location.protocol = 'id=1'; // 省略'?'问好，会让当前窗口访问 http://www.baidu.com?id=1

History

可对当前页的浏览历史进行操作，如：前进、后退等。但不能知道浏览了哪些URL。

主要属性方法

back() ：当前所属窗口访问上一个访问过的URL。等同于浏览器的"后退"按钮，也等同于history.go(-1)。

void forward() ：当前所属窗口访问下一个访问过的URL。等同于浏览器的"前进"按钮，也等同于history.go(1)。

void go(int index) ：使当前窗口访问指定的访问过的URL。当前窗口访问过的URL，是存入一个数组。正数表示前进index个(点击"前进"按钮index次)，负数表示后退index个(点击"后退"按钮index次)。