JavaScript Window窗口对象属性和使用方法


Posted in Javascript onJanuary 19, 2020

一、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为对话框显示的字符串,一般运行结果如下:

JavaScript Window窗口对象属性和使用方法

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

语法如下:

window.confrim(question);

其中question是要显示在确认对话框的纯文本,也是表达了程序想让用户回答的问题

而且他有一个返回值,如果单击了确定返回真、反之为假。

比如下面的这段小程序:

<script>
 var flag = window.confirm("你确定要关闭浏览器窗口吗?");
 if(flag)
  window.close();
</script>

会展示下面的结果:

JavaScript Window窗口对象属性和使用方法

3、提示对话框——prompt()

弹出一个提示框,在提示框中有一个输入框,在显示输入框的时候,在输入框内显示提示字符串,在输入文本框显示缺省文本并等待用户输入,输入之后,单击确定返回用户输入的字符串,如果是取消则返回null值

语法如下:

window.prompt(str1,str2)

参数说明:其中str1表示在对话框要被显示的信息,str2指定对话框内输入框的值。

比如下面这段小程序:

<script>
 function pro() {
  var message = document.getElementById("message");
  message.value = window.prompt(message.value,"返回的信息")
 }
</script>
<input id="message" type="text" size="40" value="请在此输入信息">
<br><br>
<input type="button" value="显示对话框" onClick="pro()">

效果如下:

JavaScript Window窗口对象属性和使用方法

三、打开与关闭窗口

1、打开窗口——open()

语法格式:

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)关闭当前窗口

下面任意语句可以实现关闭当前窗口:

window.close();
close();
this.close();

例子:关闭子窗口时自动刷新父窗口

步骤1: 在原来的页面,怼一个<a>链接,用于打开一个新窗口,代码如下:

<a href="#" rel="external nofollow" onClick="javascript:window.open('new.html','width=400,height=220')">打开链接</a>

步骤2: 新建new.html,然后写入脚本和一个按钮,代码如下:

<script>
 function clo() {
  alert("关闭子窗口!");
  window.opener.location.reload();  //刷新父窗口
  window.close();
 }
</script>
<input type="submit" value="关闭" onclick="clo()">

效果如下:

JavaScript Window窗口对象属性和使用方法

(2)关闭子窗口

通过窗口句柄以变量的形式进行保存,然后通过close方法关闭创建的窗口,语法如下:

windowname.close();

其中windowname表示已打开窗口的句柄

例如,在主窗口旁边弹出一个子窗口,当单击主窗口的按钮后,自动关闭子窗口,代码如下:

<form name="form1">
 <input type="button" name="Button" value="关闭子窗口" onclick="newclose()">
</form>
<script>
 var win = window.open("new.html","new","width=300,height=100");
 function newclose() {
  win.close();
 }
</script>

效果如下:

JavaScript Window窗口对象属性和使用方法

四、控制窗口

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为正数向下滚动,否则向上*/

比如选择一张我们的女神江疏影把图片拉大,然后写脚本:

<img src="1.jpg" height="1000">
<script>
 var pos = 0;
 function scroller() {
  pos++;
  scrollTo(0,pos);
  clearTimeout(timer);
  var timer = setTimeout("scroller()",10);
 }
 scroller();

效果如下:(太美啦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)

JavaScript Window窗口对象属性和使用方法

3、改变窗口大小

实现将当前窗口改变为指定的大小(x,y),当x,y>0为扩大,反之为缩小,语法如下:

window.resizeBy(x,y);

例子:动态改变窗口大小

代码如下:

<script>
 var winheight,winsize,x;
 function openwin() {
  winheight=100;
  winsize=100;
  x=5;
  win2 = window.open("new.html","","scrollbars='no'");
  win2.moveTo(0,0);
  win2.resizeTo(100,100);
  resize();
 }
 function resize() {
  if(winheight>=screen.availHeight-3)
   x=0;
  win2.resizeBy(5,x);
  winheight+=5;
  winsize+=5;
  if(winsize>=screen.width-5){
   winheight=100;
   winsize=100;
   return;
  }
  setTimeout("resize()",50);
 }
</script>
<a href="javascript:openwin()" rel="external nofollow" >打开一个自动改变大小的窗口</a>

效果如下:

JavaScript Window窗口对象属性和使用方法

4、访问窗口历史

利用history对象实现访问窗口历史,history对象是一个只读URL字符串数组,主要存储一个最近访问网页的URL地址列表。语法如下:

[window.]history.property|method([parameters])

history对象常用属性:

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

常用方法:

方法 说明
back() 退回前一页
forward() 重新进入下一页
go() 进入指定网页

比如使用history对象中的back()forward()方法来引导跳转:

<a href="javascript:window.history.forward();" rel="external nofollow" >forward</a>
<a href="javascript:window.history.back()" rel="external nofollow" >back</a>

使用history.go()方法指定要访问的历史记录,如果参数为正数向前移动,否则向后移动

<a href="javascript:window.history.go(-1)" rel="external nofollow" >向后退一次</a>
<a href="javascript:window.history.go(2)" rel="external nofollow" >向前进两次</a>

length属性访问history数组的长度,通过它可以很快访问末尾:

<a href="javascript:window.history.go(window.history.length-1)" rel="external nofollow" >末尾</a>

5、设置超时

为一个窗口设置在某段时间后执行何种操作,称为设置超时

window对象的setTimeout()方法用于设一个超时,语法如下:

timerId = setTimeout(要执行的代码,以毫秒为单位时间)

还可以使用clearTimeout()来中止该超时设置,语法格式如下:

clearTimeout(timerId);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
vue filters的使用详解
Jun 11 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 #Javascript
js原生map实现的方法总结
Jan 19 #Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 #Javascript
JS运算符简单用法示例
Jan 19 #Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 #Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 #Javascript
js实现图片上传到服务器和回显
Jan 19 #Javascript
You might like
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python文件操作基础流程解析
2020/03/19 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
Ajax的优点和缺点
2014/11/21 面试题
机械专业毕业生推荐信范文
2013/11/25 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
企业演讲稿范文
2013/12/28 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
社区综治工作汇报
2014/10/27 职场文书
合作合同协议书范本
2015/01/27 职场文书
普宁寺导游词
2015/02/04 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书