JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JavaScript Window 对象

Window对象表示当前浏览器的窗口,是JavaScript的顶级对象,我们创建的所有对象、函数、变量都是Window对象的成员。

不过,一般情况下我们的代码中省略了window对象,浏览器默认会作为window对象的成员来调用。

例如,调用一个全局变量 myName 的完整写法是:
window.myName;
但是我们完全可以这样写:
myName;

三种定义全局变量的方法:
  • 在函数外部使用 var 声明变量,例如:
    var myName=" xiaoming ";
  • 在任意地方直接声明变量(不使用 var ),例如:
    myName=" xiaoming ";
  • 将变量作为window对象的属性,例如:
    window.myName=" xiaoming ";

在DOM操作中,我们经常使用的document也是window对象的属性,下面两种获取节点的方式是一样的:
window.document.getElementById("demo");
document.getElementById("demo");

JavaScript顶级对象参考模型


顶级对象模型的层次结构

另外,window对象的方法和属性是在全局范围内有效的。

获取浏览器的宽度和高度

JavaScript可以通过window对象来获取浏览器窗口的宽度和高度(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari 请使用:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5 请使用:
document.documentElement.clientHeight
document.documentElement.clientWidth

或者:
document.body.clientHeight
document.body.clientWidth

下面给出了适合所有浏览器的代码:
var width=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;