Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至(HTML DOM 的)document 对象也是 window 对象属性:
window.document.getElementById("header");
等同于:
document.getElementById("header");
窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸:
window.innerHeight - 浏览器窗口的内高度(以像素计)
window.innerWidth - 浏览器窗口的内宽度(以像素计)
浏览器窗口(浏览器视口)不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth
一个实用的 JavaScript 解决方案(包括所有浏览器):
实例:
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他窗口方法
一些其他方法:
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口
Window Screen
window.screen 对象不带 window 前缀也可以写:
属性 | 描述 |
---|---|
screen.width | 返回以像素计的访问者屏幕宽度 |
screen.height | 返回以像素计的访问者屏幕的高度 |
screen.availWidth | 返回访问者屏幕的宽度,以像素计,减去诸如窗口工具条之类的界面特征 |
screen.availHeight | 返回访问者屏幕的高度,以像素计,减去诸如窗口工具条之类的界面特征 |
screen.colorDepth | 返回用于显示一种颜色的比特数,显示以位计的屏幕色彩深度 |
screen.pixelDepth | 返回屏幕的像素深度 |
Window Location
window.location 对象可不带 window 前缀书写。
属性 | 描述 |
---|---|
window.location.href | 返回当前页面的 href (URL) |
window.location.hostname | 返回 web 主机的域名 |
window.location.pathname | 返回当前页面的路径或文件名 |
window.location.protocol | 返回使用的 web 协议(http: 或 https:) |
window.location.port | 返回(当前页面的)互联网主机端口的编号 |
window.location.assign | 加载新文档 |
注释:如果端口号是默认值(对于 http 为 80,对于 https 为 443),则大多数浏览器将显示 0 或不显示。 |
Window History
window.history 对象可不带 window 书写。
为了保护用户的隐私,JavaScript 访问此对象存在限制。
方法 | 描述 |
---|---|
history.back() | 加载历史列表中前一个 URL,等同于在浏览器点击后退按钮 |
history.forward() | 加载历史列表中下一个 URL,等同于在浏览器中点击前进按钮 |
Window Navigator
window.navigator 对象可以不带 window 前缀来写。
一些例子:
属性 | 描述 |
---|---|
navigator.appName | 返回浏览器的应用程序名称,“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称 |
navigator.appCodeName | 返回浏览器的应用程序代码名称,“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称 |
navigator.product | 返回浏览器引擎的产品名称,大多数浏览器都将 “Gecko” 作为产品名称返回 |
navigator.appVersion | 返回有关浏览器的版本信息 |
navigator.userAgent | 返回由浏览器发送到服务器的用户代理报头(user-agent header) |
navigator.platform | 返回浏览器平台(操作系统) |
navigator.language | 返回浏览器语言 |
navigator.onLine | 返回 true,假如浏览器在线 |
navigator.javaEnabled() 方法 | 返回 true,如果 Java 已启用 |
navigator.cookieEnabled | 返回 true,如果 cookie 已启用,否则返回 false |
警告!!! | |
来自 navigator 对象的信息通常是误导性的,不应该用于检测浏览器版本,因为: |
- 不同浏览器能够使用相同名称
- 导航数据可被浏览器拥有者更改
- 某些浏览器会错误标识自身以绕过站点测试
- 浏览器无法报告发布晚于浏览器的新操作系统