Skip to content
On this page

Window对象

Window对象表示浏览器窗口或框架,它是BOM中的核心对象,提供了很多与浏览器窗口相关的属性和方法。

窗口大小和位置

窗口大小和位置

  • window.innerWidth和window.innerHeight属性:表示窗口内部的宽度和高度,不包括工具栏和滚动条。
  • window.outerWidth和window.outerHeight属性:表示整个浏览器窗口的宽度和高度,包括工具栏和滚动条。
  • window.pageXOffset和window.pageYOffset属性:表示窗口滚动条相对于窗口左上角的偏移量。
  • window.scrollTo(x, y)方法:将窗口滚动到指定的位置。

浏览器历史记录

浏览器历史记录

  • window.history.length属性:表示当前窗口的历史记录条目数。
  • window.history.back()方法:将窗口回退到上一个历史记录条目。
  • window.history.forward()方法:将窗口前进到下一个历史记录条目。
  • window.history.go(num)方法:将窗口移动到指定的历史记录条目,其中num为正数表示前进,负数表示后退。

浏览器定时器

浏览器定时器

  • window.setTimeout(func, delay)方法:在指定的延迟时间后执行指定的函数。
  • window.setInterval(func, interval)方法:每隔指定的时间执行指定的函数。
  • window.clearTimeout(timeoutId)方法:取消先前设置的延迟执行函数。
  • window.clearInterval(intervalId)方法:取消先前设置的定时执行函数。

对话框和消息框

对话框和消息框

  • window.alert(msg)方法:显示一个带有指定消息的警告框。
  • window.confirm(msg)方法:显示一个带有指定消息和确定和取消按钮的确认框,返回值为布尔值。
  • window.prompt(msg, defaultVal)方法:显示一个带有指定消息和输入框的对话框,返回值为用户输入的字符串或null。

其他常用属性和方法

其它

  • window.document属性:表示窗口中当前显示的文档。
  • window.location属性:表示当前窗口的URL信息,包括URL中的协议、主机名、端口、路径和查询字符串等。
  • window.navigator属性:表示浏览器的相关信息,包括浏览器名称、版本、操作系统和语言等。
  • window.open(url, name, features)方法:打开一个新的浏览器窗口或标签页,其中url为新窗口的URL地址,name为新窗口的名称,features为新窗口的一些属性,如大小、位置和工具栏等。
  • window.close()方法:关闭当前窗口或标签页。

使用例子

例子

以下是一些使用Window对象的例子:

  1. 弹出警告框:
js
window.alert('Hello World!');
  1. 打开新的浏览器窗口:
js
window.open('http://www.example.com', '_blank', 'width=500,height=500');
  1. 关闭当前浏览器窗口:
js
window.close();
  1. 在浏览器控制台输出日志信息:
js
window.console.log('This is a log message.');
  1. 加载一个新的URL:
js
window.location.href = 'http://www.example.com';
  1. 重新加载当前页面:
js
window.location.reload();
  1. 获取当前文档的URL:
js
var url = window.location.href;
  1. 获取当前窗口的尺寸:
js
var width = window.innerWidth;
var height = window.innerHeight;
  1. 获取当前窗口的屏幕坐标:
js
var x = window.screenX;
var y = window.screenY;
  1. 获取浏览器的User-Agent字符串:
js
var userAgent = window.navigator.userAgent;

这些例子只是冰山一角,Window对象提供了非常丰富的API,可以控制浏览器的行为、获取浏览器的信息等。在实际开发中,我们需要根据具体的需求选择合适的API。