×

[JavaScript学习]JavaScript浏览器对象-window对象

作者:admin2016.11.11来源:Web前端之家浏览:5694评论:0
微信公众号

微信公众号

在上一篇文章中我们介绍了"JavaScript浏览器对象-navigator对象"。今天将继续学习:JavaScript浏览器对象-window对象。

600.png

窗口是JavaScript浏览器对象模型中的顶层对象,称为window对象,它代表了打开的浏览器窗口,这是一个全局对象。

窗口也可以划分为几个独立的显示区域,每一个区域显示相对独立的内容,这样的区域称为框架,它实际上是窗口中的窗口。关于框架将会在后面进行介绍。

window对象的属性和方法

窗口对象是所有其他对象的基础,它有一组属性和方法,用于控制窗口的特征和行为。由于窗口对象十分复杂,又是其他对象的父对象,因此,在使用窗口对象的属性和方法时,JavaScript允许省略窗口对象的名称。例如,使用窗口对象的alert()方法来显示一个弹出的消息框时,标准的写法应该是:window.alert("message"),但是JavaScript允许使用简略的写法:alert("message")

窗口对象提供了一组丰富的属性和方法,其中某些属性本身又是对象,这是面向对象编程的一个特点。下表中列出了window对象的常用属性。

属性 描述
closed 指明窗口是否已经被关闭,只读属性,true表示已关闭,false表示未关闭
defaultStatus 指定浏览器下方状态栏中显示的默认信息。只要状态栏中没有显示其他消息,就显示该属性指定的信息
document 只读属性,为当前窗口或框架包含的Document对象的引用
frames[] 记录窗口中包含的框架,每一个框架都是一个window对象,框架本身可以嵌套
history 指向history对象的引用,只读属性
length 窗口中包含的框架个数
location 用于本窗口的location对象。该属性的行为比较特殊,如果将一个URL复制给该属性,那么浏览器就加载并显示该URL指定的文档
name 窗口的名称,窗口的名称可以通过window.open()方法指定,也可以在<frame>标记中使用name属性指定
navigator 执行navigator对象的引用,只读属性。通过navigator对象,程序可以了解浏览器的基本信息
opener 指向打开本窗口的窗口的引用
parent 一个只读引用,指向包含本窗口或框架的窗口。如果本窗口为顶层窗口,那么该属性指向自己
screen 指向screen对象的引用,只读属性
self 指向窗口本身的引用,与window属性的意义完全相同
status 指定浏览器状态栏中显示的临时信息
top 一个只读引用,指向包含本窗口的最顶层窗口,如果本窗口就是最顶层窗口,那么该属性指向自己
window 当前窗口,与self属性意义相同
clientInformation 该属性只用于IE浏览器,是navigator属性的别名
event 该属性只用于IE浏览器,指向Event对象,Event对象包含了最近发生事件的细节。在IE对象模型中,Event对象没有作为事件处理程序的参数传递,而是赋值给了event属性
innerHeight,innerWidth 只适用于Netscape 4+,指定窗口总的高度、宽度,以像素为单位。该区域包括菜单栏、工具栏、滚动条和窗口边框
outerHeight,outerWidth 只适用于Netscape 4+,指定窗口总的高度、宽度,以像素为单位。该区域包括菜单栏、工具栏、滚动条和窗口边框
pageXOffset,pageYOffset 整数型只读值,指定当前文档已经向右(pageXOffset)、向下(pageYOffset)滚动了多少像素
screenX,screenY 整数型只读值,指定窗口左上角在屏幕的x,y坐标。如果当前窗口是框架,那么这两个属性指定框架左上角在顶层窗口上的x,y坐标

window对象的方法:

方法 描述
alert(message) 弹出对话框,显示message信息,无返回值
blur() 从窗口中移去键盘输入焦点,无返回值
clearInterval(intervalId) 清除先前设置的定时器,无返回值
clearTimeout(timeoutId) 清除先前设置的超时,无返回值
close() 关闭窗口,无返回值
confirm(question) 显示一个确认对话框,单击“确定”按钮时返回true,否则返回false
focus 得到键盘的输入焦点,同时将该窗口放在其他窗口的前面,无返回值
getComputedStyle(elt) 返回一个只读的style对象,它包含了应用于指定文档元素elt的所有CSS样式(不仅仅是嵌入样式)。从这个计算样式对象查询得到的定位属性(如left,top,width等)总是以像素值返回
moveBy(dx,dy) 将窗口从当前位置移动指定的距离,无返回值
moveTo(x,y) 将窗口移动到指定的位置,无返回值
open(url,name,features) 在name参数指定的窗口中显示url指定的文档。如果省略了name参数,或没有name参数指定的窗口,那么将创建一个新的窗口。features是可选参数,这是一个字符串,用于指定新窗口的大小和样式。字符串中,使用逗号分隔各个特性。所有的平台都支持的特性名称有:width=pixels,height=pixels,location,menubar,resizable,status和toolbar。在IE中,使用left=x和top=y设置窗口的位置;在Netscape中,使用screenX=x和screenY=y来设置窗口的位置。该方法返回现有窗口对象或新建窗口对象。
print() 打印文档内容,相当于用户点击了浏览器中的“打印”按钮,无返回值
prompt(message,default) 打开一个提示对话框,显示message指定的内容,并等待用户输入一段文字。default参数是可选参数,指定在输入框中最初显示的内容,返回值为字符串;如果输入框中没有字符,则返回空字符串;如果单击了“取消”按钮,则返回null值
resizeBy(dw,dh) 将窗口缩放到指定的大小,无返回值
resizeTo(width,height) 将窗口的大小修改为指定的宽度和高度
scroll(x,y) 将窗口的内容(文档)滚动到指定的坐标,无返回值。在JavaScript1.2后被scrollTo()方法替代
scrollBy(dx,dy) 将窗口的内容(文档)滚动到指定的量,无返回值
scrollTo(x,y) 将窗口的内容(文档)滚动到指定的位置,无返回值
setInterval(code,interval,args...) 每隔interval指定的毫秒数就执行一次code字符串指定的代码。IE5及以后的版本中,code参数可以用函数引用来代替字符串,此时,每隔interval指定的毫秒数就执行一次该函数。该方法返回一个内部的ID值,该值可以传递给clearInterval()方法来取消代码的周期执行
setTimeout(code,delay) 在延迟delay参数指定的毫秒数之后执行code字符串指定的代码。IE5及以后的版本中,code参数可以用函数引用来代替字符串,此时,延迟delay指定的毫秒数就执行一次该函数。该方法返回一个内部的ID值,该值可以传递给setTimeout()来取消延迟执行的代码。注意,该方法是立即返回,并不是在返回之前等待delay指定的毫秒数

应用举例

打开和关闭窗口

我们除了通过在浏览器中执行“文件”→“新建”→“窗口”命令来打开一个新窗口外,也可以通过JavaScript代码来打开一个新的浏览器窗口,这需要用到window对象的open()方法。它的语法为:

var window_obj = window.open("url",windowname,[features]);

例如下面的代码在点击按钮之后打开一个新的窗口,新窗口中显示的是百度首页的内容。

var winObj = window.open("https://www.baidu.com/","百度一下");

open()方法的features参数指定一组定制新窗口特性的选项,其有效值如下表所示:

选项名称 可选值 描述
directories yes/no 或 1/0 新窗口中是否显示“链接”按钮
height 整数值 新窗口的高度
width 整数值 新窗口的宽度
location yes/no 或 1/0 新窗口中是否显示地址栏
menubar yes/no 或 1/0 新窗口中是否显示菜单栏
resizable yes/no 或 1/0 新窗口是否允许用户改变大小
scrollbars yes/no 或 1/0 新窗口是否显示滚动条
status yes/no 或 1/0 新窗口是否显示状态栏
toolbar yes/no 或 1/0 新窗口是否显示工具栏

选项的使用方法为:使用等号将选项名称与选项值对应起来,选项之间使用逗号分隔。例如下面的例子:

var winObj = window.open("https://www.baidu.com/",
                  "百度一下",
                  "width=640,height=350,toolbar=yes,
                   directories=yes,status=no,resizable=yes,
                   scrollbars=yes,location=yes,menubar=yes"
                  );
//可以使用close()方法来关闭刚才打开的窗口
winObj.close();
移动和缩放窗口

在JavaScript中有几种方式移动窗口和改变窗口的大小,包括相对移动(相对缩放)和绝对移动(绝对缩放)。此时,传递给window对象的方法的参数以像素为单位,相对放大和移动窗口时,正值表示放大(左移),负值表示缩小(右移)。看下面的实例代码:

moveBy(10,20);      //将窗口向右移动10个像素,向下移动20个像素
moveBy(-10,20);     //将窗口向左移动10个像素,向下移动20个像素
resizeBy(15,20);    //将窗口在当前大小的基础上横向放大15个像素,纵向放大20个像素
resizeBy(15,-20);   //将窗口在当前大小的基础上横向放大15个像素,纵向缩小20个像素
moveTo(0,0);        //将窗口移动到屏幕的左上角
resixeTo(480,320);  //将窗口大小修改为横向480个像素,纵向320个像素
完成定时任务

window对象提供了一个具有闹钟功能的方法setTimeout(),利用这个方法,可以定时执行某些任务。该方法有两个参数:第一个参数是一个字符串,其内容是一个表达式;第二个参数是表达式延迟执行的时间,以毫秒为单位。

如果使用setTimeout()的函数不断的调用自己(延迟时间非常的短),就会产生连续动画的效果。我们可通过clearTimeout()方法来终止由setTimeout()方法指定的表达式的执行。

从JavaScript 1.2开始,提供了用于在指定时间间隔中重复执行指定代码的方法setInterval(),某些时候使用这个方法来完成重复性的定时任务更加方便和简单。同样,可以使用clearInterval()方法来终止程序的重复执行。

setTimeoutsetInterval()方法的语法格式为:

var timeout = setTimeout("expression",delaytime);                             
var tumerId = setInterval("expression",delaytime);  
clearTimeout(timeout);
clearInterval(tumerId);

下面的例子中使用setInterval()方法来制作一个电子时钟:

滚动文档内容

利用window对象的scrollTo()方法,可以移动窗口中文档内容的显示位置。当打开一另一个新窗口时,可以把它的内容滚动到指定的位置。scrollTo()方法在不同的浏览器中显示效果不完全相同。

scrollTo()方法有两个参数,它们指定水平方向和垂直方向的窗口位置,以像素为单位。参数(0,0)表示窗口的左上角;(0,300)表示从开始位置向下滚动300个像素;(300,0)表示从开始位置向右滚动300个像素。scrollTo()方法的语法格式为:

winObj.scrollTo(x,y);

winObj是window对象,包括框架,x为水平坐标位置,y为垂直坐标位置。

下面的例子中点击“返回页面顶部”按钮可以回到页面的顶部。

代码为:

window.scrollTo(0,0);

返回javascript教程主目录>>

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/js1473523200851.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    alert('哈哈')...

  • admin

    可以的...

  • 前端面试题

    你好,可以换一下链接吗?...

  • admin

    关于微信小程序,后面会出一些文章的,请关注网站更新。。。...

  • webred

    博主可以分享点小程序的文章......

  • 访客

    可以用。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • admin

    可以的,可以联系下QQ,或者加群。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero