【JavaScript 漫游】【031】window 对象总结

news2025/1/20 0:04:02

漫画_城市
文章简介

本篇文章为【JavaScript 漫游】专栏的第 030 篇文章，记录了浏览器模型中 window 对象的相关知识点。

window 对象概述

浏览器里面，window 对象（注意，w 为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。

a = 1;
window.a // 1

window 对象的属性

这里介绍 window 对象常用的属性，包括：

  • window.closed
  • window.screenX 和 window.screenY
  • window.innerHeight 和 window.innerWidth
  • window.outerHeight 和 window.outerWidth
  • window.scrollX 和 window.scrollY
  • window.pageXOffset 和 window.pageYOffset
  • window.locationbar
  • window.menubar
  • window.scrollbars
  • window.toolbar
  • window.statusbar
  • window.personalbar
  • window.document
  • window.location
  • window.navigator
  • window.history
  • window.localStorage
  • window.sessionStorage
  • window.console
  • window.screen

window.closed

返回一个布尔值，表示窗口是否关闭。

window.scrollX 和 window.scrollY

返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。

window.innerHeight 和 window.innerWidth

返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。

注意，这两个属性值包括滚动条的高度和宽度。

window.outerHeight 和 window.outerWidth

返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。

window.scrollX 和 window.scrollY

window.scrollX 属性返回页面的水平滚动距离，window.scrollY 属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。

注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是 0。

window.pageXOffset 和 window.pageYOffset

window.scrollX 和 window.scrollY 的别名。

window.locationbar

地址栏对象

window.menubar

菜单栏对象

window.scrollbars

窗口的滚动条对象

window.toolbar

工具栏对象

window.statusbar

状态栏对象

window.personalbar

用户安装的个人工具栏对象

window.document

指向 document 对象，这个属性有同源限制。只有来自同源的脚本才能读取这个属性

window.location

指向 Location 对象，用于获取当前窗口的 URL 信息。它等同于document.location 属性

window.navigator

指向 Navigator 对象，用于获取环境信息

window.history

指向 History 对象，表示浏览器的浏览历史

window.localStorage

指向本地储存的 localStorage 数据

window.sessionStorage

指向本地储存的 sessionStorage 数据

window.console

指向 console 对象，用于操作控制台

window.screen

指向 Screen 对象，表示屏幕信息

window 对象的方法

window 对象的常用方法有如下：

  • window.alert()、window.prompt() 和 window.confirm()
  • window.open()、window.close() 和 window.stop()
  • window.scrollTo()、window.scroll() 和 window.scrollBy()
  • window.print()
  • window.focus() 和 window.blur()
  • window.requestAnimationFrame()
  • window.requestIdleCallback()

window.alert()、window.prompt() 和 window.confirm()

window.alert()、window.prompt()、window.confirm() 都是浏览器与用户互动的全局方法。它们会弹出不同的对话框，要求用户做出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，无法定制。

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

alert('本条提示\n分成两行');

window.prompt() 方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。

var result = prompt('您的年龄？', 25)

window.prompt() 的返回值有两种情况，可能是字符串（有可能是空字符串），也有可能是 null。具体分成三种情况。

  1. 用户输入信息，并点击“确定”，则用户输入的信息就是返回值
  2. 用户没有输入信息，直接点击“确定”，则输入框的默认值就是返回值
  3. 用户点击了“取消”（或者按了 ESC 按钮），则返回值是 null

window.confirm() 方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意。

var result = confirm('你最近好吗？');

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

var okay = confirm('Please confirm this message.');
if (okay) {
  // 用户按下“确定”
} else {
  // 用户按下“取消”
}

这三个方法都具有堵塞效应，一旦弹出对话框，整个页面就是暂停执行，等待用户做出反应。

window.open()、window.close() 和 window.stop()

window.open 方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。它会返回新窗口的引用，如果无法新建窗口，则返回 null。

open 方法一共可以接受三个参数。

window.open(url, windowName, [windowFeatures])

-url：字符串，表示新窗口的网址。如果省略，默认网址就是 about:blank

  • windowName：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则占用该窗口，不再新建窗口。如果省略，就默认使用 _blank，表示新建一个没有名字的窗口。另外还有几个预设值，_self 表示当前窗口，_top 表示顶层窗口，_parent 表示上一层窗口
  • windowFeatures：字符串，内容为逗号分隔的键值对，表示新窗口的参数，比如有没有提示栏、工具条等等。如果省略，则默认打开一个完整 UI 的新窗口。如果新建的是一个已经存在的窗口，则该参数不起作用，浏览器沿用以前窗口的参数
var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);

第三个参数可以设定的属性非常多，这里不作具体介绍。

window.close() 用于关闭当前窗口，一般只用来关闭 window.open() 新建的窗口。

window.stop() 完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象。

window.scrollTo()、window.scroll() 和 window.scrollBy()

window.scrollTo() 用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

window.scrollTo(x-coord, y-coord)

它也可以接受一个配置对象作为参数。

window.scrollTo(options)

配置对象 options 有三个属性。

  • top：滚动后页面左上角的垂直坐标，即 y 坐标
  • left：滚动后页面左上角的水平坐标，即 x 坐标
  • behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为 auto

window.scroll() 方法是 window.scrollTo() 方法的别名。

window.scrollBy() 方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

如果不是要滚动整个文档，而是要滚动某个元素，可以使用下面三个属性和方法。

  • Element.scrollTop
  • Element.scrollLeft
  • Element.scrollIntoView()

window.print()

跳出打印对话框，与用户点击菜单里面的“打印”命令效果相同。

常见的打印按钮代码如下。

document.getElementById('printLink').onclick = function () {
  window.print();
}

window.focus() 和 window.blur()

window.focus() 方法会激活窗口，使其获得焦点，出现在其他窗口的前面。

var popup = window.open('popup.html', 'Popup Window');

if ((popup !== null) && !popup.closed) {
  popup.focus();
}

window.blur() 方法将焦点从窗口移除。

当前窗口获得焦点时，会触发 focus 事件；当前窗口失去焦点时，会触发 blur 事件。

window.requestAnimationFrame()

window.requestAnimationFrame() 方法跟 setTimeout 类似，都是推迟某个函数的执行。不同之处在于，setTimeout 必须指定推迟的时间，window.requestAnimationFrame() 则是推迟到浏览器下一次重流时执行，执行完才会进行下一次重绘。重绘通常是 16ms 执行一次，不过浏览器会自动调节这个速率，比如网页切换到后台 Tab 页时，requestAnimationFrame() 会暂停执行。

如果某个函数会改变网页的布局，一般就放在 window.requestAnimationFrame() 里面执行，这样可以节省系统资源，使得网页效果更加平滑。因为慢速设备会用较慢的速率重流和重绘，而速度更快的设备会有更快的速率。

该方法接受一个回调函数作为参数。

window.requestAnimationFrame(callback)

callback 是一个回调函数。callback执行时，它的参数就是系统传入的一个高精度时间戳（performance.now()的返回值），单位是毫秒，表示距离网页加载的时间。

window.requestAnimationFrame() 的返回值是一个整数，这个整数可以传入window.cancelAnimationFrame()，用来取消回调函数的执行。

下面是一个 window.requestAnimationFrame() 执行网页动画的例子。

var element = document.getElementById('animate');
element.style.position = 'absolute';

var start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  // 元素不断向左移，最大不超过200像素
  element.style.left = Math.min(progress / 10, 200) + 'px';
  // 如果距离第一次执行不超过 2000 毫秒，
  // 就继续执行动画
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

上面代码定义了一个网页动画，持续时间是2秒，会让元素向右移动。

window.requestIdleCallback()

window.requestIdleCallback() 跟 setTimeout 类似，也是将某个函数推迟执行，但是它保证将回调函数推迟到系统资源空闲时执行。也就是说，如果某个任务不是很关键，就可以使用 window.requestIdleCallback() 将其推迟执行，以保证网页性能。

它跟 window.requestAnimationFrame() 的区别在于，后者指定回调函数在下一次浏览器重排时执行，问题在于下一次重排时，系统资源未必空闲，不一定能保证在16毫秒之内完成；window.requestIdleCallback() 可以保证回调函数在系统资源空闲时执行。

该方法接受一个回调函数和一个配置对象作为参数。配置对象可以指定一个推迟执行的最长时间，如果过了这个时间，回调函数不管系统资源有无空虚，都会执行。

window.requestIdleCallback(callback[, options])

callback 参数是一个回调函数。该回调函数执行时，系统会传入一个 IdleDeadline 对象作为参数。IdleDeadline 对象有一个 didTimeout 属性（布尔值，表示是否为超时调用）和一个 timeRemaining() 方法（返回该空闲时段剩余的毫秒数）。

options 参数是一个配置对象，目前只有 timeout 一个属性，用来指定回调函数推迟执行的最大毫秒数。该参数可选。

window.requestIdleCallback() 方法返回一个整数。该整数可以传入window.cancelIdleCallback() 取消回调函数。

requestIdleCallback(myNonEssentialWork);
function myNonEssentialWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
}

上面代码中，requestIdleCallback() 用来执行非关键任务 myNonEssentialWork 。该任务先确认本次空闲时段有剩余时间，然后才真正开始执行任务。

requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });

上面代码指定，processPendingAnalyticsEvents 必须在未来2秒之内执行。

如果由于超时导致回调函数执行，则 deadline.timeRemaining() 返回 0，deadline.didTimeout 返回 true。

如果多次执行 window.requestIdleCallback()，指定多个回调函数，那么这些回调函数将排成一个队列，按照先进先出的顺序执行。

事件

这里介绍 window 对象的四个事件：

  • load 事件
  • onload 事件
  • error 事件
  • onerror 事件

load 事件和 onload 事件

load 事件发生在文档在浏览器窗口加载完毕时。window.onload 属性可以指定这个事件的回调函数。

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};

error 事件和 onerror 事件

浏览器脚本发生错误时，会触发 window 对象的 error 事件。我们可以通过window.onerror 属性对该事件指定回调函数。

window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出错了！--> %s", error.stack);
};

由于历史原因，window 的 error 事件的回调函数不接受错误对象作为参数，而是一共可以接受五个参数，它们的含义依次如下。

  • 出错信息
  • 出错脚本的网址
  • 行号
  • 列号
  • 错误对象

老式浏览器只支持前三个参数。

多窗口操作

由于网页可以使用 iframe 元素，嵌入其他网页，因此一个网页之中会形成多个窗口。如果子窗口之中又嵌入别的网页，就会形成多级窗口。

窗口的引用

各个窗口之中的脚本，可以引用其他窗口。浏览器提供了一些特殊变量，用来返回其他窗口。

  • top：顶层窗口，即最上层的那个窗口
  • parent：父窗口
  • self：当前窗口，即自身

下面代码可以判断，当前窗口是否为顶层窗口。

if (window.top === window.self) {
  // 当前窗口是顶层窗口
} else {
  // 当前窗口是子窗口
}

下面的代码让父窗口的访问历史后退一次。

window.parent.history.back();

与这些变量对应，浏览器还提供一些特殊的窗口名，供 window.open() 方法、<a> 标签、<form> 标签等引用。

  • _top：顶层窗口
  • _parent：父窗口
  • _blank：新窗口

下面代码就表示在顶层窗口打开链接。

<a href="somepage.html" target="_top">Link</a>

对于 iframe 嵌入的窗口，document.getElementById() 可以拿到该窗口的 DOM 节点，然后使用 contentWindow 属性获得 iframe 节点包含的 window 对象。

var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;

上面代码中，frame.contentWindow 可以拿到子窗口的 window 对象。然后，在满足同源限制的情况下，可以读取子窗口内部的属性。

// 获取子窗口的标题
frameWindow.title

<iframe> 元素的 contentDocument 属性，可以拿到子窗口的 document 对象。

var frame = document.getElementById('theFrame');
var frameDoc = frame.contentDocument;

// 等同于
var frameDoc = frame.contentWindow.document;

<iframe> 元素遵守同源政策，只有当父窗口与子窗口在同一个域时，两者之间才可以用脚本通信，否则只有使用 window.postMessage 方法。

<iframe> 窗口内部，使用 window.parent 引用父窗口。如果当前页面没有父窗口，则window.parent 属性返回自身。因此，可以通过 window.parent 是否等于 window.self ，判断当前窗口是否为 iframe 窗口。

if (window.parent !== window.self) {
  // 当前窗口是子窗口
}

<iframe> 窗口的 window 对象，有一个 frameElement 属性，返回 <iframe> 在父窗口中的 DOM 节点。对于非嵌入的窗口，该属性等于 null。

var f1Element = document.getElementById('f1');
var f1Window = f1Element.contentWindow;

f1Window.frameElement === f1Element // true
window.frameElement === null // true

window.frames 属性

window.frames 属性返回一个类似数组的对象，成员是所有子窗口的 window 对象。可以使用这个属性，实现窗口之间的互相引用。比如，frames[0] 返回第一个子窗口，frames[1].frames[2] 返回第二个子窗口内部的第三个子窗口，parent.frames[1] 返回父窗口的第二个子窗口。

注意，window.frames 每个成员的值，是框架内的窗口（即框架的 window 对象），而不是 iframe 标签在父窗口的 DOM 节点。如果要获取每个框架内部的 DOM 树，需要使用window.frames[0].document 的写法。

另外，如果 <iframe> 元素设置了 name 或 id 属性，那么属性值会自动成为全局变量，并且可以通过 window.frames 属性引用，返回子窗口的 window 对象。

// HTML 代码为 <iframe id="myFrame">
window.myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true

另外，name 属性的值会自动成为子窗口的名称，可以用在 window.open 方法的第二个参数，或者 <a> 和 <frame> 标签的 target 属性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1496131.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【开发工具】Git模拟多人开发场景理解分支管理和远程仓库操作

【开发工具】Git模拟多人开发场景理解分支管理和远程仓库操作

我们来模拟一个多人多分支的开发场景。假设你有一个新的空白远程仓库,假设地址是 https://github.com/user/repo.git。 克隆远程仓库到本地 $ git clone https://github.com/user/repo.git这会在本地创建一个 repo 目录,并自动设置远程主机为 origin。 创建本地开发分支并推送…
阅读更多...
安卓部分手机使用webview加载链接后白屏（Android低版本会出现的问题）

安卓部分手机使用webview加载链接后白屏（Android低版本会出现的问题）

前言 大爷&#xff1a;小伙我这手机怎么打开你们呢这个是白屏什么都不显示。 大娘&#xff1a;小伙我这也是打开你们呢这功能&#xff0c;就是一个白屏什么也没有&#xff0c;你们呢的应用不会有病毒吧。 小伙&#xff1a;我的手机也正常&#xff1b; 同事&#xff1a;我的也正…
阅读更多...
使用RabbitMQ实现延时消息自动取消的简单案例

使用RabbitMQ实现延时消息自动取消的简单案例

一、流程图 二、导包 <!--消息队列 AMQP依赖&#xff0c;包含RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 三、配置文件 #消息队列 …
阅读更多...
Python PyQt5 多Tab demo

Python PyQt5 多Tab demo

参考&#xff1a; https://cloud.tencent.com/developer/news/388937 importsysfromPyQt5.QtWidgetsimportQVBoxLayout,QWidget,QFormLayout,QHBoxLayout,QLineEdit,QRadioButton,QCheckBox,QLabel,QGroupBox,QApplication,QTabWidgetclassTabDemo(QTabWidget):def__init__(se…
阅读更多...
C++内存泄漏检测

C++内存泄漏检测

C进阶专栏&#xff1a;http://t.csdnimg.cn/aTncz 相关系列文章 C技术要点总结, 面试必备, 收藏起来慢慢看 C惯用法之RAII思想: 资源管理 C智能指针的自定义销毁器(销毁策略) 目录 1.内存泄漏概述 1.1.内存泄漏产生原因 1.2 内存泄漏导致的后果 1.3 内存泄漏解决思路 2.宏…
阅读更多...
Linux——线程(2)

Linux——线程(2)

在上一篇博客中我介绍了Linux中的线程是什么样的&#xff0c;就如同进程可以通过 fork创建&#xff0c;可以被终止&#xff0c;可以退出一样&#xff0c;线程也可以被我们用户控制&#xff0c;这 篇博客我会介绍线程的控制&#xff0c;并且基于线程的控制所产生的一些问题进行 …
阅读更多...
安装系统后，如何单个盘空间扩展多个盘空间？

安装系统后，如何单个盘空间扩展多个盘空间？

1、计算机-管理-存储-磁盘空间 2、压缩C盘符&#xff0c;分出多余空间 3、将多余空间扩展&#xff0c;然后修改盘符名称
阅读更多...
为什么会不断出现低价窜货链接

为什么会不断出现低价窜货链接

品牌在做控价的过程中&#xff0c;会进入一个怪圈&#xff0c;就是不管如何治理&#xff0c;低价、乱价、窜货链接都在不断出现&#xff0c;甚至有些低价链接会占据电商首页的位置&#xff0c;其实这些在一定程度上讲是正常的&#xff0c;品牌在不断发展&#xff0c;链接也是动…
阅读更多...
Cyber RT 开发工具

Cyber RT 开发工具

在Cyber RT中还提供了一些工具&#xff0c;这些工具可以拓展Cyber RT功能、提高开发调试效率&#xff0c;本章主要介绍这些工具的使用。 本章内容: 1.cyber record工具的应用&#xff1b; 2.常用命令工具的使用&#xff1b; 学习收获: 1.可以通过cyber record将发布的话题消息…
阅读更多...
基础50刷题之一（交替合并字符串）

基础50刷题之一（交替合并字符串）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、题目二、力扣官方题解&#xff08;双指针&#xff09;三、文心一言解释总结 前言 刚上研一&#xff0c;有人劝我好好学C&#xff0c;当时用的不多就没学&a…
阅读更多...
Javascript进阶课程——大纲

Javascript进阶课程——大纲

JavaScript进阶教程_哔哩哔哩_bilibili
阅读更多...
Windows下 OracleXE_21 数据库的下载与安装

Windows下 OracleXE_21 数据库的下载与安装

Oracle 数据库的下载与安装 数据库安装包下载数据库安装访问数据库进行测试Navicat连接数据库 1. 数据库安装包的下载 1.1 下载地址 Oracle Database Express Edition | Oracle 中国 1.2 点击“下载 Oracle Database XE”按钮&#xff0c;进去到下载页面&#xff08;选择对…
阅读更多...
图论练习5

图论练习5

Going Home Here 解题思路 模板 二分图最优匹配&#xff0c;前提是有完美匹配&#xff08;即存在一一配对&#xff09;左右集合分别有顶标&#xff0c;当时&#xff0c;为有效边&#xff0c;即选中初始对于左集合每个点&#xff0c;选择其连边中最优的&#xff0c;然后对于每…
阅读更多...
uniapp 解决请求出现 /sockjs-node/info?t=问题

uniapp 解决请求出现 /sockjs-node/info?t=问题

1. uniapp请求出现 /sockjs-node/info?t问题 1.1. 问题 uniapp项目老是出现 http://192.168.2.106:8080/sockjs-node/info?t1709704280949 1.1. sockjs-node介绍 sockjs-node 是一个JavaScript库&#xff0c;提供跨浏览器JavaScript的API&#xff0c;创建了一个低延迟、全…
阅读更多...
spring 注解缓存查询方法使用

spring 注解缓存查询方法使用

spring-boot项目启动类上加注解: EnableCaching 查询方法注解: Cacheable
阅读更多...
基于springboot的精准扶贫管理系统论文

基于springboot的精准扶贫管理系统论文

精准扶贫管理系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了精准扶贫管理系统的开发全过程。通过分析精准扶贫管理系统管理的不足&#xff0c;创建了一个计算机管理精准扶贫管理系统的方案。文章介绍了精…
阅读更多...
【Java JVM】Class 文件的加载

【Java JVM】Class 文件的加载

Java 虚拟机把描述类的数据从 Class 文件加载到内存, 并对数据进行校验, 转换解析和初始化, 最终形成可以被虚拟机直接使用的 Java 类型, 这个过程被称作虚拟机的类加载机制。 与那些在编译时需要进行连接的语言不同, 在 Java 语言里面, 类的加载, 连接和初始化过程都是在程序…
阅读更多...
SpringBoot整合【RocketMQ】

SpringBoot整合【RocketMQ】

目录 1.POM文件添加依赖及yml配置 2.RocketmqUtil 3.生产者&#xff08;异步发送示例&#xff09; 4.消费者 5.测试 1.POM文件添加依赖及yml配置 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter&l…
阅读更多...
html--3D爱心

html--3D爱心

文章目录 代码效果 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>爱心</title><style type"text/css">*{margin: 0px;border: 0px;}body{overflow: hidden;background-…
阅读更多...
简单整理vue-router,路由知识

简单整理vue-router,路由知识

1.项目中引入 1.1 安装注册 1.2 封装抽离 在main.js中 书写,会造成单个js文件过于臃肿的情况,需要将路由配置部分抽离出来,在src下新建router文件夹,新建index.js文件 import Vue from vue import VueRouter from vue-router import HomeView from ../views/HomeView.vue im…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023