一、Window对象概述
创新互联为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名,让您的网站具备超强的网络竞争力!结合企业自身,进行网站设计及把握,最后结合企业文化和具体宗旨等,才能创作出一份性化解决方案。从网站策划到网站设计、做网站, 我们的网页设计师为您提供的解决方案。
Window
对象可以用来打开浏览器,调整浏览器的位置、大小等等功能。
Window
对象可以处理框架和框架之间的关系,通过这种关系在一个框架中处理另一个框架中的文档。他也是所有对象的顶级对象,通过Window
对象的子对象进行操作,可以实现更多的效果。
1、Window对象属性
每个对象都有自己的属性,顶级对象Window
是所有其他子对象的父对象,它可以出现在每个页面上,并且可以咋单个JS应用程序中被多次使用。
下表列出了一些Window
对象常用属性:
属性 | 说明 |
---|---|
document | 对话框中显示当前文档 |
frames | 表示当前对话框中所有frame对象的集合 |
location | 指定当前文档的URL |
name | 对话框的名字 |
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
运算符来创建对象:
window.属性名 window.方法名(参数列表) //////////////////////////////// // 使用关键字来代替window // parent.属性名 parent.方法名(参数列表)
二、对话框
为了响应用户的某种需求而弹出的小窗口
1、警告对话框——alert()
语法如下:
window.alert(str);
弹出警告对话框,str
为对话框显示的字符串,一般运行结果如下:
2、确认对话框——confrim()
语法如下:
window.confrim(question);
其中question
是要显示在确认对话框的纯文本,也是表达了程序想让用户回答的问题
而且他有一个返回值,如果单击了确定
返回真、反之为假。
比如下面的这段小程序:
会展示下面的结果:
3、提示对话框——prompt()
弹出一个提示框,在提示框中有一个输入框,在显示输入框的时候,在输入框内显示提示字符串
,在输入文本框显示缺省文本
并等待用户输入,输入之后,单击确定
返回用户输入的字符串,如果是取消
则返回null值
语法如下:
window.prompt(str1,str2)
参数说明:其中str1
表示在对话框要被显示的信息,str2
指定对话框内输入框的值。
比如下面这段小程序:
效果如下:
三、打开与关闭窗口
1、打开窗口——open()
语法格式:
WindowVar = window.open(url,name,[location])
参数说明:
WindowVar
:如果open方法成功,返回一个Window对象的句柄。url
目标窗口的URLname
:目标窗口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)关闭当前窗口
下面任意语句可以实现关闭当前窗口:
window.close(); close(); this.close();
例子:关闭子窗口时自动刷新父窗口
步骤1:在原来的页面,怼一个链接,用于打开一个新窗口,代码如下:
步骤2:新建new.html
,然后写入脚本和一个按钮,代码如下:
效果如下:
(2)关闭子窗口
通过窗口句柄以变量的形式进行保存,然后通过close方法关闭创建的窗口,语法如下:
windowname.close();
其中windowname
表示已打开窗口的句柄
例如,在主窗口旁边弹出一个子窗口,当单击主窗口的按钮后,自动关闭子窗口,代码如下:
效果如下:
四、控制窗口
1、移动窗口
(1)moveTo()方法
语法如下:
window.moveTo(x,y);
其中x,y
是窗口左上角的坐标,
(2)resizeTo()方法
这个方法可以将当前窗口改成(x,y)
大小,x、y
分别代表宽度和高度,语法如下:
window.resizeTo(x,y);
(3)screen对象
屏幕对象反映了当前用户的屏幕设置,下表列出了屏幕对象的一些属性:
属性 | 说明 |
---|---|
width | 整个屏幕的水平尺寸 |
height | 整个屏幕的垂直尺寸 |
pixelDepth | 显示器每个像素的位数 |
colorDepth | 返回当前颜色设置所用的位数,1代表黑白;8代表256色(256种颜色);16代表增强色(大概64000种颜色);24/32代表真彩色(1600万种颜色) |
availWidth | 返回窗口内容区域的水平尺寸 |
availHeight | 返回川康内容区域的垂直尺寸 |
2、窗口滚动
利用Window
对象的scroll()
方法可以指定窗口的当前位置,从而实现窗口的滚动效果,语法如下:
window.scroll(x,y); //滚动到指定的绝对位置,相对文档的左上角 window.scrollTo(x,y); //同上 window.scrollBy(x,y); /*可以将文档滚动到相对位置,如果参数x为正数,向右滚动,否则向左;如果参数y为正数向下滚动,否则向上*/
比如选择一张我们的女神江疏影把图片拉大,然后写脚本:
效果如下:
4、访问窗口历史
利用history
对象实现访问窗口历史,history
对象是一个只读URL字符串数组,主要存储一个最近访问网页的URL地址列表。语法如下:
[window.]history.property|method([parameters])
history
对象常用属性:
属性 | 说明 |
---|---|
length | 历史列表的长度,用于判断列表中的入口数目 |
current | 当前文档的URL |
next | 历史列表的下一个URL |
previous | 历史列表的前一个URL |
常用方法:
方法 | 说明 |
---|---|
back() | 退回前一页 |
forward() | 重新进入下一页 |
go() | 进入指定网页 |
比如使用history对象
中的back()
和forward()
方法来引导跳转:
使用history.go()
方法指定要访问的历史记录,如果参数为正数向前移动,否则向后移动
length
属性访问history
数组的长度,通过它可以很快访问末尾:
5、设置超时
为一个窗口设置在某段时间后执行何种操作,称为设置超时
window
对象的setTimeout()方法
用于设一个超时,语法如下:
timerId = setTimeout(要执行的代码,以毫秒为单位时间)
还可以使用clearTimeout()
来中止该超时设置,语法格式如下:
clearTimeout(timerId);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。