窗口对象

65 阅读3分钟

一、 window对象方法

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

二、打开和关闭窗口

当点击“调试代码”按钮时,就会打开一个新的窗口,并把HTML文档输出到新的页面中去。

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

URL打开的是窗口的地址,如果URL为空字符串,则浏览器打开一个空白窗口。

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

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

参数及说明

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

举例:window.open('http://www.boyaa.com/index.html)

上面是打开一个新窗口,并且在新窗口加载博雅首页。

打开一个指定位置的窗口

window.open("www.boyaa.com/index.html"…");

打开一个指定大小的窗口:

window.open("www.boyaa.com/index.html"…");

打开一个固定大小的窗口: window.open("www.boyaa.com/index.html"…");

打开一个显示滚动条的窗口:

window.open("www.boyaa.com/index.html"…");

关闭窗口

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

  1. 关闭当前窗口
window.close();
close();
this.close;

2.关闭子窗口(就是关闭之前使用window.open()方法动态创建的子窗口)

窗口名.close();

三、改变窗口大小

在JavaScript中,可以使用window对象的resizeTo()方法或resizeBy()方法来改变窗口的大小。

1.resizeTo()方法

语法: window.resizeTO(x,y)

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

2.resizeBy()方法

语法: window.resizeBy(x,y)

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

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

resizeTo()和resizeBy的区别:

resizeTo(x,y)与resizeBy(x,y)不同在于:resizeTo(x,y)中的x、y是“改变后”的数值,而resizeBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果,“by”表示一个过程。

四、窗口历史

平常在使用浏览器当中,我们都会经常使用浏览器中的“前进”和“后退”。其实浏览器都会帮我们保存浏览的历史(即窗口历史)。

1.history对象

history对象属性

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

2.history对象方法

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