JavaScript中Window对象的属性及事件


Posted in Javascript onDecember 25, 2015

Window 对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

windows对象属性

属性 描述
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对 Document 对象的只读引用。请参阅 Document 对象。
history 对 History 对象的只读引用。请参数 History 对象。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener 返回对创建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的先辈窗口。
window window 属性等价于 self 属性,它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

windows对象方法

方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

不同的运行环境有不同的“顶层对象”,而在浏览器的环境中,顶层对象就是window对象。window就是指当前的浏览器窗口。

例:var a = 1;

window.a; //1

1.window对象的属性。

(1)window.name属性

window.name用于设置浏览器当前浏览器窗口的名字。其特点为浏览器刷新后,该属性保持不变。

(2)window.innerHeight属性,window.innerWidth属性

这两个属性返回网页的css布局占据的浏览器窗口的高度和宽度。这两个属性的值包括浏览器的滚动条的高度和宽度。

(3)window.pageXoffset属性和window.pageYoffset属性。

window.pageXoffset返回页面水平滚动的距离。window.pageYoffset返回页面垂直滚动的距离。

(4)iframe元素

window.iframe返回一个类似数组的对象。

(5)screen对象

显示设备的信息。

// 显示设备的高度,单位为像素

screen.height
// 1920
// 显示设备的宽度,单位为像素

screen.width
// 1080

2.window对象的事件。

(1)onerror事件。

oonerror事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。

(2)alert(),prompt(),confirm()

都是浏览器用来与用户互动的方法。它们会弹出不同的对话框。

例:alert("Hello World");

alert();弹出的对话框,只有一个“确定”按钮,往往用来通知用户某些信息。

例:var result = prompt('您的年龄?', 25)

prompt();弹出的对话框,有一个输入框,要求用户输入信息,并有“确定”和“取消”两个按钮。这个方法往往用来获取用户输入的数据。

例:var result = confirm("你最近好吗?");

confirm();confirm方法返回一个布尔值,如果用户点击“确定”,则返回true;如果用户点击“取消”,则返回false。

Javascript 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
JavaScript字符串删除重复字符的方法
Dec 25 #Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 #Javascript
jquery实现图片预加载
Dec 25 #Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 #Javascript
使用堆实现Top K算法(JS实现)
Dec 25 #Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 #Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 #Javascript
You might like
PHP实现的简单缓存类
2015/07/29 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python实现彩票系统
2020/06/28 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
销售顾问工作计划书
2014/08/15 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
长江七号观后感
2015/06/11 职场文书
Python竟然能剪辑视频
2021/05/25 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
Redis基本数据类型String常用操作命令
2022/06/01 Redis