网站源码-图片-资料下载-学习资料-牛资料网!只做精品资料网
  • 首 页
  • [JavaScript学习]JavaScript浏览器对象-window对象
    时间:2019-09-09 11:08 来源:www.xyhndec.com 编辑:免费资料 浏览:

    在上一篇文章中我们介绍了"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]);
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html

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

    var winObj = window.open("https://www.baidu.com/","百度一下");
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html

    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();
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html
    移动和缩放窗口

    在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个像素
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html
    完成定时任务

    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);
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html

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

    滚动文档内容

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

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

    winObj.scrollTo(x,y);
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html

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

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

    代码为:

    window.scrollTo(0,0);
    
    本段代码来自 https://www.jiangweishan.com/article/js1473523200851.html

    郑重声明:
    牛资料网所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系牛资料网索要。
    如有侵犯您的版权,请及时联系QQ:964613048,我们尽快处理。

    JavaScript面向对象-基于原型链实现继承JavaScript面向对象-基于原型链实现继
    JavaScript事件-事件流JavaScript事件-事件流
    正则表达式-正则表达式的元字符正则表达式-正则表达式的元字符
    推荐栏目
    • 客服:我们竭诚为您服务!
    • 客服:我们竭诚为您服务!