请选择 进入手机版 | 继续访问电脑版

登录  | 立即注册

游客您好!登录后享受更多精彩

查看: 6253|回复: 8

JavaScript Window窗口对象

[复制链接]

24

主题

41

帖子

439

积分

中级会员

Rank: 3Rank: 3

积分
439
发表于 2020-1-19 12:51:05 | 显示全部楼层 |阅读模式
文章目录


一、Window对象概述

Window对象可以用来打开浏览器,调整浏览器的位置、大小等等功能。
Window对象可以处理框架和框架之间的关系,通过这种关系在一个框架中处理另一个框架中的文档。他也是所有对象的顶级对象,通过Window对象的子对象进行操作,可以实现更多的效果。
1、Window对象属性

每个对象都有自己的属性,顶级对象Window是所有其他子对象的父对象,它可以出现在每个页面上,并且可以咋单个JS应用程序中被多次使用。
下表列出了一些Window对象常用属性:
属性说明document对话框中显示当前文档frames表示当前对话框中所有frame对象的集合location指定当前文档的URLname对话框的名字status/defaultStatus状态栏中的当前信息top表示最顶层的浏览器对话框parent/opener表示包含当前对话框的夫对话框closed表示当前对话框是否关闭(布尔值)self表示当前对话框screen表示用户屏幕,提供屏幕尺寸、颜色深度等信息navigator表示浏览器对象,用于获取与浏览器相关的信息2、Window对象方法

方法说明alert()弹出警告对话框confrim()在确认对话框显示指定的字符串prompt()弹出一个提示对话框open()打开新浏览器对话框并且显示URL或名字引用的文档,并设置创建对话框的属性close()关闭被引用的对话框focus()指定对话框放在所有浏览器最前面blur()指定对话框放在所有浏览器最后面scrollTo(x,y)把对话框滚动到指定的坐标scrollBy(offsetx,offsety)按照指定位移量滚动对话框setTimeout(timer)在指定的毫秒数过后,对传递的表达式求值setInerval(interval)指定周期性执行代码moveTo(x,y)将对话框移动到指定坐标moveBy(offsetx,offsety)将对话框移动到指定的位移量处resizeTo(x,y)设置对话框大小resizeBy(offsetx,offsety)按照指定的位移量设置对话框大小print()“打印”navigate(URL)使用对话框显示URL指定的页面3、如何使用

JS运行使用一个字符串来给窗口命名,也可以使用一些关键字来代替。
Window对象可以直接调用方法和属性,不需要使用new运算符来创建对象:
  1. window.属性名window.方法名(参数列表)//////////////////////////////////    使用关键字来代替window   //parent.属性名parent.方法名(参数列表)
复制代码
二、对话框

为了响应用户的某种需求而弹出的小窗口
1、警告对话框——alert()

语法如下:
  1. window.alert(str);
复制代码
弹出警告对话框,str为对话框显示的字符串,一般运行结果如下:

2、确认对话框——confrim()

语法如下:
  1. window.confrim(question);
复制代码
其中question是要显示在确认对话框的纯文本,也是表达了程序想让用户回答的问题
而且他有一个返回值,如果单击了确定返回真、反之为假。
比如下面的这段小程序:
  1. [/code]会展示下面的结果:
  2. [align=center][img]https://img-blog.csdnimg.cn/2020011808480087.png#pic_center[/img][/align]
  3. [size=5]3、提示对话框——prompt()[/size]
  4. 弹出一个提示框,在提示框中有一个输入框,在显示输入框的时候,在输入框内显示提示字符串,在输入文本框显示缺省文本并等待用户输入,输入之后,单击确定返回用户输入的字符串,如果是取消则返回null值
  5. 语法如下:
  6. [code]window.prompt(str1,str2)
复制代码
参数说明:其中str1表示在对话框要被显示的信息,str2指定对话框内输入框的值。
比如下面这段小程序:
复制代码
效果如下:

三、打开与关闭窗口

1、打开窗口——open()

语法格式:
  1. WindowVar = window.open(url,name,[location])
复制代码
参数说明:

  • WindowVar:如果open方法成功,返回一个Window对象的句柄。
  • url目标窗口的URL
  • name:目标窗口Window对象名称
  • location:大考窗口的可选参数
    他的可选参数,如下表所示:
参数说明top窗口顶部距离屏幕顶部的像素数left窗口左端距离屏幕左端的像素数width/height宽度/高度scrollbars是否显示滚动条resizable设定对话框大小是否固定toolbar浏览器的工具条,包括后退及前进按钮menubar菜单条,一般包括有文件、编辑及其他一些条目location定位区,地址栏direction更新信息的按钮下面举几个例子:
打开一个新窗口:window.open("new.html","new")
打开一个指定大小的窗口:window.open("new.html","new","height=140,width=690")
打开一个指定位置的窗口:window.open("new.html","new","top=300,left=200")
打开一个带滚动条的固定窗口:window.open("new.html","new","scrollbars,resizable")
2、关闭窗口

(1)关闭当前窗口

下面任意语句可以实现关闭当前窗口:
  1. window.close();close();this.close();
复制代码
例子:关闭子窗口时自动刷新父窗口

步骤1: 在原来的页面,怼一个链接,用于打开一个新窗口,代码如下:
  1. [url=http://www.12360.co/#]打开链接[/url]
复制代码
步骤2: 新建new.html,然后写入脚本和一个按钮,代码如下:
  1. [/code]效果如下:
  2. [align=center][img]https://img-blog.csdnimg.cn/20200118092955992.gif#pic_center[/img][/align]
  3. [size=4](2)关闭子窗口[/size]
  4. 通过窗口句柄以变量的形式进行保存,然后通过close方法关闭创建的窗口,语法如下:
  5. [code]windowname.close();
复制代码
其中windowname表示已打开窗口的句柄
例如,在主窗口旁边弹出一个子窗口,当单击主窗口的按钮后,自动关闭子窗口,代码如下:
  1.    
复制代码
效果如下:

四、控制窗口

1、移动窗口

(1)moveTo()方法

语法如下:
  1. window.moveTo(x,y);
复制代码
其中x,y是窗口左上角的坐标,
(2)resizeTo()方法

这个方法可以将当前窗口改成(x,y)大小,x、y分别代表宽度和高度,语法如下:
  1. window.resizeTo(x,y);
复制代码
(3)screen对象

屏幕对象反映了当前用户的屏幕设置,下表列出了屏幕对象的一些属性:
属性说明width整个屏幕的水平尺寸height整个屏幕的垂直尺寸pixelDepth显示器每个像素的位数colorDepth返回当前颜色设置所用的位数,1代表黑白;8代表256色(256种颜色);16代表增强色(大概64000种颜色);24/32代表真彩色(1600万种颜色)availWidth返回窗口内容区域的水平尺寸availHeight返回川康内容区域的垂直尺寸2、窗口滚动

利用Window对象的scroll()方法可以指定窗口的当前位置,从而实现窗口的滚动效果,语法如下:
  1. window.scroll(x,y);                        //滚动到指定的绝对位置,相对文档的左上角window.scrollTo(x,y);                //同上window.scrollBy(x,y);                /*可以将文档滚动到相对位置,如果参数x为正数,向右滚动,否则向左;如果参数y为正数向下滚动,否则向上*/
复制代码
比如选择一张我们的女神江疏影把图片拉大,然后写脚本:
  1. [img]http://www.12360.co/1.jpg[/img]![在这里插入图片描述](https://img-blog.csdnimg.cn/20200118113027730.gif)
复制代码
效果如下:(太美啦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)

3、改变窗口大小

实现将当前窗口改变为指定的大小(x,y),当x,y>0为扩大,反之为缩小,语法如下:
  1. window.resizeBy(x,y);
复制代码
例子:动态改变窗口大小

代码如下:
  1. 打开一个自动改变大小的窗口
复制代码
效果如下:

4、访问窗口历史

利用history对象实现访问窗口历史,history对象是一个只读URL字符串数组,主要存储一个最近访问网页的URL地址列表。语法如下:
  1. [window.]history.property|method([parameters])
复制代码
history对象常用属性:
属性说明length历史列表的长度,用于判断列表中的入口数目current当前文档的URLnext历史列表的下一个URLprevious历史列表的前一个URL常用方法:
方法说明back()退回前一页forward()重新进入下一页go()进入指定网页比如使用history对象中的back()和forward()方法来引导跳转:
  1. forwardback
复制代码
使用history.go()方法指定要访问的历史记录,如果参数为正数向前移动,否则向后移动
  1. 向后退一次向前进两次
复制代码
length属性访问history数组的长度,通过它可以很快访问末尾:
  1. 末尾
复制代码
5、设置超时

为一个窗口设置在某段时间后执行何种操作,称为设置超时
window对象的setTimeout()方法用于设一个超时,语法如下:
  1. timerId = setTimeout(要执行的代码,以毫秒为单位时间)
复制代码
还可以使用clearTimeout()来中止该超时设置,语法格式如下:
  1. clearTimeout(timerId);
复制代码
                                                                                                                                       
                                                    
  • 点赞                        3                        
  • 收藏                        
  • 分享                                                                                                                        
  •                                                         
                                      
    • 文章举报                           
                                                
                                                                        
                                            
                                                        lesileqin                                                                发布了184 篇原创文章 · 获赞 331 · 访问量 5万+                                                                                            私信                                                            关注
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:CSS盒子模型(重点)
下一篇:网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
回复

使用道具 举报

0

主题

24

帖子

514

积分

高级会员

Rank: 4

积分
514
发表于 2020-1-25 03:51:49 | 显示全部楼层
这东西我收了!谢谢楼主![www.12360.co]
回复

使用道具 举报

13

主题

26

帖子

322

积分

中级会员

Rank: 3Rank: 3

积分
322
发表于 2020-1-25 13:06:30 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

0

主题

11

帖子

241

积分

中级会员

Rank: 3Rank: 3

积分
241
发表于 2020-1-30 05:50:47 | 显示全部楼层
这个帖子不回对不起自己![www.12360.co]
回复

使用道具 举报

16

主题

30

帖子

352

积分

中级会员

Rank: 3Rank: 3

积分
352
发表于 2020-2-10 13:41:14 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享![www.12360.co]
回复

使用道具 举报

0

主题

24

帖子

514

积分

高级会员

Rank: 4

积分
514
发表于 2020-2-28 07:05:13 | 显示全部楼层
楼主太厉害了!楼主,I*老*虎*U![www.12360.co]
回复

使用道具 举报

0

主题

14

帖子

304

积分

中级会员

Rank: 3Rank: 3

积分
304
发表于 2020-2-29 08:17:13 | 显示全部楼层
楼主,我太崇拜你了![www.12360.co]
社区不能没有像楼主这样的人才啊!
回复

使用道具 举报

发表于 2020-3-19 04:56:20 | 显示全部楼层
我看不错噢 谢谢楼主![www.12360.co]
回复

使用道具 举报

0

主题

42

帖子

892

积分

高级会员

Rank: 4

积分
892
发表于 2020-3-26 11:41:38 | 显示全部楼层
感谢楼主的无私分享![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

动物之森

GMT+8, 2020-4-6 01:24 , Processed in 0.091156 second(s), 27 queries .

www.12360.co 集合吧!动物之森

Copyright © 2019-2020.

快速回复 返回顶部 返回列表