Window对象

window表示当前的浏览器窗口。如果HTML文档中包含框架(<iframe>标签),浏览器会为HTML文档创建一个window对象,也会为框架创建一个window对象。

window的属性和方法都可省略window单独使用。

一、属性

1、name

含义:设置或返回浏览器窗口的名称;获取window.open()方法中设置的窗口名称,或是在iframe页面框架中获取当前窗口的名称。

使用:

window.name = 'window对象';       // 设置浏览器窗口的名称
window.name;                     // "window对象",获取浏览器窗口的名称

var jueJin = window.open('https://juejin.im/', '掘金');
jueJin.name;        // "掘金"

2、length

含义:设置或返回浏览器窗口中的iframe框架数量。HTML文档中没有<iframe>标签,则length为0。

使用:

window.length = 2;      // 设置
window.length;          // 2,返回

3、closed

含义:返回一个布尔值,表示窗口是否关闭。

使用:

window.closed;      // flase

4、opener

含义:返回打开当前窗口窗口的引用;在A窗口中用window.open()创建窗口B,B中window.opener的值就是A,即相当于A是B的父窗口。

使用:

var jueJin = window.open('https://juejin.im/', '掘金');
jueJin.open;        // window,在其他窗口中,opener为null

5、screenLeftscreenTop

Firefox浏览器不支持。

含义:返回浏览器窗口相对于屏幕左边和上边的位置。

使用:

window.screenTop;       // 0,浏览器全屏
window.screenLeft;      // 0,浏览器全屏

6、screenXscreenY

除IE外,Firefox和其他浏览器都支持。

含义:返回浏览器窗口相对于屏幕左边和上边的位置。

使用:

window.screenX;         // 0,浏览器全屏
window.screenY;         // 0,浏览器全屏

7、pageXOffsetpageYOffset

含义:返回HTML页面的当前视图区域的左上角相对于整个HTML页面左上角的左边和上边的位置;实质是水平和垂直滚动条滚动的距离。

使用:

window.pageXOffset;
window.pageYOffset;

8、innerWidthinnerHeight

含义:返回HTML页面视图区域的宽度和高度(包括滚动条,只要属于HTML页面的)。

使用:

window.innerWidth;
window.innerHeight;

9、outerWidthouterHeight

含义:返回浏览器窗口的宽度和高度。

使用:

window.outerWidth;
window.outerHeight;

10、selfparenttop

含义:self返回当前窗口;parent返回当前窗口的父窗口;top返回最顶层父窗口。

使用:

window.self === window;     // true,返回当前窗口即等于它自己window
window.parent;
window.top;

window.self === window.top; // true,判断当前窗口是否就是顶层窗口

二、方法

1、alert()confirm()prompt()

作用:获取用户响应,不作介绍。

2、open()

含义:创建一个新的浏览器窗口(或标签页),并返回这个窗口window对象。

参数:

  • 第一个参数:字符串,在新窗口中显示的文档URL,省略则为ablut:blank
  • 第二个参数:字符串,新窗口的名称,如果名称存在,则跳转到该名称的窗口,不新建窗口,省略则默认使用_blank,创建一个没名称的窗口,可用window.name获取;
  • 第三个参数:字符串,可选,逗号分隔的列表,可指定窗口的大小和各种属性;非标准,建议忽略;
  • 第四个参数:布尔值,只在第二个参数存在才有用,表示第一个参数指定的URL是否应该替换浏览历史的当前记录,默认为false

使用:

window.open('https://juejin.im/', 'jueJin');
// 等同于 <a href="https://juejin.im/" target="jueJin"></a>

var jueJin = window.open('https://juejin.im/', 'jueJin', 'height=360,width=360,left=0,top=0,resizable=yes');
jueJin.name;        // "jueJin"

3、close()

含义:关闭window.open()打开的窗口。

使用:

var jueJin = window.open('https://juejin.im/', 'jueJin');
jueJin.close();

4、moveTo(x, y)

含义:移动窗口到距离屏幕左上角的指定位置。

参数:两个参数,分别是窗口左上角距离屏幕的左边和上边的距离。

使用:

var jueJin = window.open('https://juejin.im/', 'jueJin', 'height=360,width=360,left=0,top=0,resizable=yes');
jueJin.moveTo(200, 200);

5、moveBy(x, y)

含义:窗口在原位置基础上向右向下移动一定距离。

参数:两个参数,分别是窗口左上角向右和向下移动的距离。

var jueJin = window.open('https://juejin.im/', 'jueJin', 'height=360,width=360,left=0,top=0,resizable=yes');
jueJin.moveBy(200, 200);

6、scrollTo(x, y)

含义:滚动HTML页面到距离整个网页左上角的指定位置。

参数:两个参数,分别是HTML页面左上角距离整个网页的左边和上边的距离。

window.scrollTo(0, 100);        // 滚动页面距离整个页面(0, 100)位置

7、scrollBy(x, y)

含义:HTML页面在原位置基础上向下向右滚动一定距离。

参数:两个参数,分别是HTML页面向右和向下滚动的距离。

window.scrollBy(0, window.innerHeight);        // 将网页向下滚动一屏

8、resizeTo(n, n)

含义:调整窗口到指定大小。

var jueJin = window.open('https://juejin.im/', 'jueJin', 'height=360,width=360,left=0,top=0,resizable=yes');
jueJin.resizeTo(600, 600);      // 调整窗口的宽高为600px

9、resizeBy(n, n)

含义:在原窗口大小基础上增加或缩小指定大小。

var jueJin = window.open('https://juejin.im/', 'jueJin', 'height=360,width=360,left=0,top=0,resizable=yes');
jueJin.resizeBy(100, 100);      // 将窗口的宽高增加100px

10、print()

含义:弹出打印窗口。

使用:

window.print();

11、setTimeout()clearTimeout()

含义:setTimeout()表示超时调用,用以注册一个函数在指定的时间之后运行;返回一个数值ID,clearTimeout()可以通过这个ID取消超时调用。

var timeOut = setTimeout(function() {
    console.log('hello');
}, 1000);               // 原本约定一秒后输出“hello”

clearTimeout(timeOut);  // 但是被取消了

12、、setInterval()clearInterval()

含义:setTimeout()表示间歇调用,用以注册一个函数按照指定的时间间歇重复运行;返回一个数值ID,clearInterval()可以通过这个ID取消间歇调用;但后一个间歇调用可能会前一个间歇调用之前运行,所以不建议使用,可用超时调用模拟间歇调用。

var interval = setInterval(function() {
    console.log('hello');
}, 1000);                // 原本约定每过一秒就输出“hello”

clearTimeout(interval);  // 但是被取消了

// 用超时调用模拟间歇调用
var num = 0, maxNum = 10;
function interval() {
    num++;
    if(num < maxNum) {
        setTimeout(interval, 1000);
    }else{
        console.log('over');
    }
}
setTimeout(interval, 1000);

三、事件

  • onerror
  • load、onload

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器