window对象简介

在JavaScript中,一个浏览器窗口就是一个window对象。window对象主要用来控制由窗口弹出的对话框、打开窗口或关闭窗口、控制窗口的大小和位置等等。一句话,window对象就是用来操作“浏览器窗口”的一个对象。

2、wind方法 说明

open()、close() 打开窗口、关闭窗口
resizeBy()、resizeTo() 改变窗口大小
moveBy()、moveTo() 移动窗口
setTimeout()、clearTimeout() 设置或取消“一次性”执行的定时器
setInterval()、clearInterval() 设置或取消“重复性”执行的定时器ow对象方法


打开和关闭窗口

一、JavaScript打开窗口

在JavaScript中,我们可以使用window对象中的open()方法来打开一个新窗口。

语法:

window.open(URL, 窗口名称, 参数);

说明:

URL:指的是打开窗口的地址,如果URL为空字符串,则浏览器打开一个空白窗口,并且可以使用document.write()方法动态输出HTML文档。

窗口名称:指的是window对象的名称,可以是a标签或form标签中target属性值。如果指定的名称是一个已经存在的窗口名称,则返回对该窗口的引用,而不会再新打开一个窗口。

参数:对打开的窗口进行属性设置。

参数以及说明
方法 说明
top 窗口顶部距离屏幕顶部的距离,默认单位为px
left 窗口左边距离屏幕左边的距离,默认单位为px
width 窗口的宽度,默认单位为px
height 窗口的高度,默认单位为px
scrollbars 是否显示滚动条
resizable 窗口大小是否固定
toolbar 浏览器工具条,包括前进或后退按钮
menubar 菜单条,一般包括文件、编辑及其它一些条目
location 地址栏,是可以输入URL的浏览器文本区
location 地址栏,是可以输入URL的浏览器文本区

几个常用的窗口打开的例子:

(1)打开一个新窗口
window.open("http://www.lvyestudy.com","","");

打开一个新窗口,并且在新窗口加载绿叶学习网首页

(2)打开一个指定位置的窗口
window.open("http://www.lvyestudy.com ","","top=200,left=200");
(3)打开一个指定大小的窗口:
window.open("http://www.lvyestudy.com ","","width=200,height=200");
(4)打开一个固定大小的窗口:
window.open("http://www.lvyestudy.com ","","width=200,height=200,resizable");
(5)打开一个显示滚动条的窗口:
window.open("http://www.lvyestudy.com ","","width=200,height=200,scrollbars");

**注意:**window.open()方法中的参数width和height设置的时候是不需要加单位(px)的,浏览器默认就已经给我们添加单位。

二、JavaScript关闭窗口

1、关闭当前窗口

在JavaScript中,如果想要关闭当前的窗口,有3种方式:

window.close();
close();
this.close();

2、关闭子窗口

所谓的“关闭子窗口”就是关闭之前使用window.open()方法动态创建的子窗口。

语法:

窗口名.close();

说明:

使用window.open()方法动态创建的窗口时,我们可以将窗口以变量形式保存,然后再使用close()方法关闭动态创建的窗口。

改变窗口大小

一、resizeTo()方法

语法:

window.resizeTo(x,y)

说明:

x表示改变后的水平宽度,y表示改变后的垂直高度。x和y的单位都是px,浏览器自带单位,我们只需要使用数值即可。

二、resizeBy()方法

语法:

window.resizeBy(x,y)

说明:

当x、y的值大于0时为扩大,小于0时为缩小。其中x和y的单位都是px。

x表示窗口水平方向每次扩大或缩小的数值,y表示垂直方向窗口每次扩大或缩小的数值。

resizeTo(x,y)与resizeBy(x,y)不同在于:resizeTo(x,y)中的x、y是“改变后”的数值,而resizeBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果,“by”表示一个过程,大家好好琢磨“to”和“by”的英文含义就懂了。

移动窗口

一、moveTo()方法

在JavaScript中,我们可以使用window对象中的moveTo()方法来将窗口移动到电脑屏幕指定坐标处。

语法:

moveTo(x,y);

说明:

x表示距离屏幕左上角的水平距离(x轴坐标);

y表示距离屏幕左上角的垂直距离(y轴坐标);

二、moveBy()方法

语法:

window.moveBy(x,y)

说明:

x表示水平方向移动的距离,单位为px。当x>0时,窗口向右移动;当x<0时,窗口向左移动。

y表示垂直方向移动的距离,单位为px。当y>0时,窗口向下移动;当y<0时,窗口向上移动。

moveTo(x,y)与moveBy(x,y)不同在于,moveTo(x,y)中的x、y是“改变后”的数值,而moveBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果,“by”表示一个过程。这一点跟resizeTo()和resizeBy()方法类似。

窗口历史

一、history对象属性

属性 说明
current 当前窗口的URL
next 历史列表中的下一个URL
previous 历史列表中的前一个URL
length 历史列表的长度,用于判断列表中的入口数目

二、history对象方法

方法 说明
go() 进入指定的网页
back() 返回上一页
forward() 进入下一页

语法:

<a href="javascript:window.history.forward();">下一页</a>
<a href="javascript:window.history.back();">上一页</a>

下一页
上一页

上一页、下一页针对浏览器历史记录而言,不能用来制作分页效果

也可使用history.go()方法指定要访问的历史记录。若参数为正数,则向前移动;若参数为负数,则向后移动

举例:

<a href="javascript:window.history.go(-1);">向后退1次</a>
<a href="javascript:window.history.back(2);">向后前进2次</a>

定时器

凡是自动执行的东西,很大可能都是跟定时器有关。

在JavaScript中,关于定时器的实现,我们有2组方法:

(1)setTimeout()和clearTimeout();
(2)setInterval()和clearInterval();

一、setTimeout()和clearTimeout()

在JavaScript中,我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

语法:

var 变量名 = setTimeout(code , time);

说明:

参数code可以是一段代码,也可以是一个调用的函数名;

参数time表示时间,表示要过多长时间才执行code中的内容,单位为毫秒。

举例:
window.onload = function () {
setTimeout(“alert(‘欢迎来到绿叶学习网’);”, 2000);
}

二、setInterval()和clearInterval()

在JavaScript中,我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

语法:

var 变量名 = setInterval (code , time);

说明:

参数code可以是一段代码,也可以是一个调用的函数名;

参数time表示时间,表示要过多长时间才执行code中的内容,单位为毫秒。

setTimeout()方法与setInterval()方法的语法很相似,实际上这两者在用法方面区别非常大。其中setTimeout()方法内的代码只会执行一次,而setInterval()方法内的代码会重复性执行,除非你使用clearInterval()方法来取消执行。

分析:

window.onload表示在页面加载完毕执行。

setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了,因为setTimeout()方法只会执行一次,而setInterval()会重复执行。