Advertisement

【JS基础】你真的了解 window对象 吗?

阅读量:

window对象

概述

在浏览器环境中,“window”是一个表示当前浏览器窗口的对象(请注意w是小写的)。它也就是当前页面的最顶层对象——也就是最高层次的对象,在此之上才会有其它子项或下属。一个变量若未被声明,则会默认地被分配为该顶层对象的属性

复制代码
    a = 1;
    window.a // 1

在上述代码中,变量a未预先声明却能被直接赋值,并因此会自动成为顶层对象的一个属性。

属性 (举例一些常用 的/红色为重点)

window.name

该属性为window.name。这是一个字符串类型,用于标识当前浏览器窗口的名称。通常没有标识符(default为"")。这个属性常用于与网页链接元素设置target属性以及表单元素配合使用。

在这里插入图片描述

浏览器窗口不关闭,则该属性无法清除。举例而言,在访问a.com时,则该页面内的脚本会设定window.name这一变量值;随后在同一窗口内加载了b.com后,则新页面内的脚本能够读取上一网页设定的window.name信息;而页面刷新操作也会产生相同的结果。一旦浏览器窗口被关闭,则该属性保存的信息就会丢失。

window.innerHeight

window.innerHeight属性用于获取网页在当前窗口可见区域的高度。该值表示为‘视口’的大小(以像素为单位)。此属性为只读类型,并且其值包含了滚动条区域的高度与宽度信息。

在这里插入图片描述
window.innerWidth

window innerSize 属性
返回当前窗口中可见区域的宽度
即 viewport 的大小(单位像素)
属性为只读
其值包含滚动条的高度与宽度

在这里插入图片描述

注意:

当用户将网页按比例放大时(例如从1x大小扩大为2x),这两个属性会缩小。这是因为此时网页的实际像素数量保持不变(例如宽度仍为960像素),但由于屏幕显示区域缩小了(可缩放区域减小),每个像素所占屏幕空间也随之减少。

window.outerHeight

该属性表示浏览器窗口的高度,并包含浏览器菜单与边框,在以像素为单位的情况下体现。此属性仅为只读模式。

在这里插入图片描述
window.outerwidth

window.outerWidth属性用于获取浏览器窗口的宽度值,并包含菜单栏和边框区域(以像素为单位)。该属性设置为只读模式。

在这里插入图片描述
window.scrollX

window.scrollX属性返回页面的水平滚动距离,单位像素,属性只读

注意,请确保该属性项的返回类型为非整型数据,在页面未发生滚动操作时,则其值等于零。

用户水平向右拉动水平滚动条200像素,window.scrollX就是200左右

在这里插入图片描述
在这里插入图片描述
window.scrollY

window.scrollY属性返回页面的垂直滚动距离,单位为像素。属性只读。

注意,请确保这个字段的返回数值为双精度浮点数值。如果当前页面处于非滚动状态,则该值即为0。

例如, 当用户拖动垂直滚动条下拉75 pixels时, 则 window.scrollY 等于 75 左右.

在这里插入图片描述
在这里插入图片描述
window.pageXoffset

确定或获取当前页面内容与窗口显示区左上角关联的位置坐标(该位置具有赋值能力但不具备实际操作能力,并且仅作为属性存在) ↓

在这里插入图片描述
window.pageYoffset

获取当前页面在窗口显示区左上角坐标点的Y坐标值(并可计算其相对位置)。该属性为不可变的数值型字段(仅用于定位)。此属性不具备实际效果。

在这里插入图片描述
在这里插入图片描述
window.parent

返回父窗口,如果当前窗口没有父窗口,window.parent 指向自身

在这里插入图片描述
window.self

指向窗口本身。等价于window属性

在这里插入图片描述
window.top

请获取顶层的上层窗口。不管有多少层嵌套结构,window.top始终会返回当前页面的最高层次窗口。

window.screenX

window.screenX 属性项用于表示浏览器窗口左上角相对于当前屏幕左上角的水平位置(以像素为单位),且该属性项不可修改。

在这里插入图片描述
window.screenY

window.screenY 属性用于表示浏览器窗口左上角基于当前屏幕左上角的纵向偏移量(以像素为单位)。该属性为不可读类型。

在这里插入图片描述

对象方法

window.alert()

window.alert() 这一方法会生成一个呈现的窗口,在窗口内仅有单一的'确认'按钮,并常用于向用户提供特定的信息

在这里插入图片描述
window.confirm()

window.confirm() 方法所展示的对话框界面中包含"确定"和"取消"两个按钮选项,在此场景下该方法通常用于询问用户是否接受某种请求或操作

在这里插入图片描述
在这里插入图片描述
window.prompt()

当调用 window.prompt() 方法时会弹出的一个对话框,在其提示文字位于下方的位置有一个用于接收用户的输入字段,并带有‘确认’和‘取消’两个按钮选项。它往往用于收集用户的输入数据:当用户在该字段中输入所需信息并点击‘确认’时,默认情况下该字段的内容会被返回;如果选择点击‘取消’则返回空值。

在这里插入图片描述
window.setInterval()

每隔固定的时间间隔(以毫秒为单位)定期执行函数调用或数学表达式的计算(简而言之来说的话就是,在每几毫秒内运行一次该程序)

window.setTimeout()

在指定的毫秒后调用函数或计算表达式 (设置几毫秒后再执行程序)

window.clearInterval()

取消由setInterval设置的timeout (停止setInterval())

window.clearTimeout()

取消由setTimeout方法设置的timeout (停止setTimeout())

window.close()

关闭当前浏览器窗口

window.open()

创建一个新的未命名的浏览器窗口,并搜索一个已定义的现有窗口 window.open(URL,name,Features,replace)

open函数的各参数说明如下:可以选择放置文件夹的位置;设置窗口标题;指定特征值时需注意格式如 width=100, height=100;此参数无实际作用)

window.print()

打印当前窗口的内容 ↓

在这里插入图片描述
window.scrollBy()

基于给定的像素偏移量实现内容滑动。(其中第一个参数控制水平滑动方向(向右),第二个参数控制垂直滑动方向(向下);当该方法被连续调用时,其传递的数值会逐次增加) ↓

在这里插入图片描述
在这里插入图片描述
scrollTo()

把内容滚动到指定的坐标 ↓

在这里插入图片描述

全部评论 (0)

还没有任何评论哟~