Skip to main content

Window 浏览器窗口对象

window 对象表示当前的浏览器窗口。

一、属性​

1、console（只读）​

window.console 返回 console 对象的引用，该对象提供了对浏览器调试控制台的访问。

2、innerWidth 与 innerHeight​

2-1、innerWidth（只读）​

window.innerWidth 获得浏览器窗口的内容区域的宽度，包含垂直滚动条(如果有的话)。

// 返回视口的宽度
window.innerWidth;

// 返回一个框架集内的框架的视口宽度
self.innerWidth;

// 返回最近的父级框架集的视口宽度
parent.innerWidth;

// 返回最外层框架集的视口宽度
top.innerWidth;

2-2、innerHeight（只读）​

window.innerHeight 获得浏览器窗口的内容区域的高度，包含水平滚动条(如果有的话)。

// 假设有一个 frameset

window.innerHeight;
// 或
self.innerHeight;
// 返回 frameset 里面的frame视口的高度

parent.innerHeight;
// 返回上一级 frameset 的视口的高度

top.innerHeight;
// 返回最外部 frameset 的视口的高度

3、outerWidth 和 outerHeight​

3-1、outerWidth（只读）​

window.outerWidth 返回浏览器窗口的外部宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）

window.outerWidth
// 2048

3-2、outerHeight（只读）​

window.outerHeight 返回浏览器窗口的外部高度，包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）

window.outerHeight
// 1062

4、scrollX 和 scrollY​

4-1、scrollX（只读）​

window.scrollX 等同于 window.pageXOffset，返回文档/页面水平方向滚动的像素值。

// 如果 scrollX 大于 400，则把文档重新滚动到左上角。
if (window.scrollX > 400) {
  window.scroll(0,0);
}

4-2、scrollY（只读）​

window.scrollY 等同于 window.pageYOffset，返回文档在垂直方向已滚动的像素值。

// 保证刚好滚动到第二页
if (window.scrollY) {
  window.scroll(0, 0);  // 重置滚动位置为文档的左上角
}

window.scrollByPages(1);

5、screen 系列​

5-1、screen（只读）​

window.screen 返回当前 window 的 screen 对象。screen 对象实现了 Screen 接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。

5-2、screenX（只读）​

window.screenX 等同于 window.screenLeft，返回浏览器左边界到操作系统桌面左边界的水平距离。

window.screenX
// 0

5-3、screenY（只读）​

window.screenY 等同于 window.screenTop，返回浏览器顶部距离系统桌面顶部的垂直距离。

window.screenY
// 25

6、location​

window.location 获取、设置 window 对象的 location, 或者当前的 URL。

// 从当前页面跳转至
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";

// 强制从服务器重新加载当前页面
window.location.reload(true);

// 使用 replace() 方法重新加载页面
window.location.replace('http://example.com/#' + 123);

7、history（只读）​

window.history 返回一个对 history 对象的引用。

history.back();     // 等同于点击浏览器的回退按钮
history.go(-1);     // 等同于 history.back();

8、localStorage（只读）​

window.localStorage 返回用来存储只能在创建它的源下访问的数据的本地存储对象的引用。

// 访问了当前域名下的本地 Storage 对象，并通过 Storage.setItem() 增加了一个数据项目
localStorage.setItem('myCat', 'Tom');

// 读取 localStorage 项
let cat = localStorage.getItem('myCat');

// 移除指定 localStorage 项
localStorage.removeItem('myCat');

// 移除所有 localStorage 项
localStorage.clear();

9、sessionStorage​

window.sessionStorage 返回对会话存储对象的引用，该对象用于存储创建它的源访问的数据。与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

10、fullScreen​

window.fullScreen 表示窗口是否以全屏显示。

if (window.fullScreen) {
  // it's fullscreen!
} else {
  // not fullscreen!
}

11、navigator（只读）​

window.navigator 返回对 navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。

12、name​

window.name 获取/设置窗口的名称。

// 窗口的名字主要用于为超链接和表单设置目标（targets）
window.name = "lab_view";

13、self（只读）​

window.self 返回一个指向当前 window 对象的引用。

if (window.parent.frames[0] != window.self) {
  // 当前对象不是 frames 列表中的第一个时
}

14、parent（只读）​

window.parent 返回当前窗口或子窗口的父窗口的引用，如果一个窗口没有父窗口则它的 parent 属性为自身的引用，如果当前窗口是一个 <iframe> 则它的父窗口是嵌入它的那个窗口。

if (window.parent != window.top) {
  // 至少有三层窗口
}

15、top（只读）​

window.top 返回窗口层级最顶层窗口的引用。

16、window（只读）​

window.window 返回对当前窗口的引用。

// 以下表达式所返回的window对象都是同一个
window.window
window.window.window
window.window.window.window

17、document​

window.document，返回对当前窗口所包含文档的引用。

18、scrollbar（只读）​

window.scrollbars 返回可以检查其可见性的滚动条对象。

19、menubar（只读）​

window.menubar 返回菜单条对象，它的可视性可以在窗口中切换。

20、personalbar（只读）​

window.personalbar 返回 personalbar 对象，其可见性可以在窗口中切换。

21、locationbar（只读）​

window.locationbar 返回 locationbar 对象，其可视性可以在窗口中切换。

22、opener​

window.opener 返回对打开当前窗口的那个窗口的引用，例如：在 window A 中打开了 window B，B.opener 返回 A。

if (window.opener != indexWin) {
  referToTop(window.opener);
}

23、frames（只读）​

window.frames 返回当前窗口中所有直接子窗口的数组。

frameList = window.frames;
// frameList 是一个 frame 对象的集合
// frameList === window 计算结果为 true
// 每一项代表了窗口对应给定对象的 <frame> 或 <iframe> 的内容
// window.frames[0] === document.getElementsByTagName("iframe")[0].contentWindow

24、frameElement（只读）​

window.frameElement 返回嵌入窗口的元素，如果未嵌入窗口，则返回 null。

var frameEl = window.frameElement;
// 如果当前窗口被包含在一个框架里面,则将该框架的地址跳到'http://mozilla.org/'
if (frameEl)
  frameEl.src = 'http://mozilla.org/';

25、length 只读（只读）​

window.length 返回窗口中的 frames 数量。

if (window.length) {
  // 该窗口包含至少一个子框架
}

26、customElements（只读）​

window.customElements 返回一个 CustomElementRegistry 对象的引用，可用于注册新的 custom elements，或者获取之前定义过的自定义元素的信息。

// 常用来获取使用 CustomElementRegistry.define() 方法定义和注册的自定义元素
let customElementRegistry = window.customElements;
customElementRegistry.define('my-custom-element', MyCustomElement);
CustomElementRegistry.define()

功能：

定义一个自定义元素。

  • 自主定制元素：独立元素; 它们不会从内置 HTML 元素继承。
  • 自定义内置元素：这些元素会继承并扩展内置HTML元素。

语法：

customElements.define(name, constructor, options);

参数：

  • name（必须）：自定义元素名。
  • constructor（必须）：自定义元素构造器。
  • options（可选）控制元素如何定义。

27、crypto（只读）​

window.crypto 返回浏览器 crypto 对象。

var cryptoObj = window.crypto || window.msCrypto; // for IE 11

28、performance（只读）​

window.performance 返回一个 Performance 对象。

Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能，包括 Navigation Timing API 和高分辨率时间数据。

二、方法​

1、对话框系列​

1-1、alert()​

window.alert(message)

功能：显示一个警告对话框，上面显示有指定的文本内容以及一个确定按钮。

参数：

  • message：要显示在对话框中的文本字符串。

示例：

window.alert("Hello world!");

1-2、confirm()​

window.confirm(message)

功能：显示一个具有一个可选消息和确定/取消两个按钮的模态对话框。

参数：

  • message：在对话框中显示的可选字符串。

示例：

if (window.confirm("Do you really want to leave?")) {
  window.open("exit.html", "Thanks for Visiting!");
}

1-3、prompt()​

result = window.prompt(text, value);

功能：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

参数：

  • result：用来存储用户输入文字的字符串。
  • text：用来提示用户输入文字的字符串，可以省略。
  • value：文本输入框中的默认值，可以省略。

示例：

// 打开空的提示窗口
var sign = window.prompt();
// 打开显示提示文本为"你是猪吗?"的提示窗口
var sign = window.prompt('你是猪吗?');

2、open() 与 close()​

2-1、open()​

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures])

功能：打开一个新窗口。

参数：

  • WindowObjectReference：打开的新窗口对象的引用，如果调用失败返回 null。
  • strUrl：新窗口需要载入的 url 地址，可以是 web 上的 html 页面也可以是图片文件或者其他任何浏览器支持的文件格式。
  • strWindowName：新窗口的名称（注意不是窗口标题），可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。
  • strWindowFeatures（可选）：列出了将要打开的窗口的一些特性。

示例：

window.open(
  "http://www.cn.com/",
  "CN_WindowName",
  strWindowFeatures
);

2-2、close()​

window.close()

功能：关闭当前窗口或某个指定的窗口。

参数：无

示例：

// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;

function openWindow() {
  openedWindow = window.open('moreinfo.htm');
}

function closeOpenedWindow() {
  openedWindow.close();
}

3、focus() 与 blur()​

3-1、focus()​

window.focus()

功能：将焦点设置在当前窗口上。

参数：无

示例：

if (clicked) { window.focus(); }

3-2、blur()​

window.blur()

功能：将焦点设置为远离窗口。

参数：无

示例：

window.blur();

4、scroll 系列​

4-1、scroll()​

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

window.scroll(options)

功能：滚动窗口至文档中的特定位置。

参数：

  • x-coord：表示想置于左上角的像素点的横坐标。

  • y-coord：表示想置于左上角的像素点的纵坐标。

  • options：一个包含三个属性的对象：

    • top：等同于 y-coord
    • left：等同于 x-coord
    • behavior：表示滚动行为，smooth (平滑滚动)、instant (默认的瞬间滚动)

示例：

// 把纵轴上第 100 个像素置于窗口顶部
<button onClick="scroll(0, 100);">点击以向下滚动 100 像素</button>

// 使用 options
window.scroll({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

4-2、scrollBy()​

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

window.scrollBy(options)

功能：在窗口中按指定的偏移量滚动文档。

参数：

  • x-coord：水平滚动的偏移量。

  • y-coord：垂直滚动的偏移量。

  • options：一个包含三个属性的对象：

    • top：等同于 y-coord
    • left：等同于 x-coord
    • behavior：表示滚动行为，smooth (平滑滚动)、instant (默认的瞬间滚动)

示例：

// 向下滚动一页
window.scrollBy(0, window.innerHeight);

// 向上滚动一页
window.scrollBy(0, -window.innerHeight);

// 使用 options
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth"
});

4-3、scrollTo()​

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

window.scrollTo(options)

功能：滚动到文档中的某个坐标。

参数：

  • x-coord：文档中的横轴坐标。

  • y-coord：文档中的纵轴坐标。

  • options：一个包含三个属性的对象：

    • top：等同于 y-coord
    • left：等同于 x-coord
    • behavior：表示滚动行为，smooth (平滑滚动)、instant (默认的瞬间滚动)

示例：

window.scrollTo(0, 1000);

// 设置滚动行为改为平滑的滚动
window.scrollTo({
  top: 1000,
  behavior: "smooth"
});

5、minimize()​

window.minimize() 让当前浏览器窗口最小化，可以通过调用 window.moveTo() 方法让窗口恢复正常显示。

6、moveBy() 与 moveTo()​

6-1、moveBy()​

window.moveBy(deltaX, deltaY)

功能：根据指定的值移动当前窗口。

参数：

  • deltaX：表示窗口在水平方向移动的像素值。
  • deltaY：表示窗口在垂直方向移动的像素值。

示例：

function budge() {
  moveBy(10, -10);
}

6-2、moveTo()​

window.moveTo(x, y)

功能：将当前窗口移动到指定的坐标位置。

参数：

  • x：是要移动到的位置横坐标。
  • y：是要移动到的位置纵坐标。

示例：

function origin() {
  // 把窗口移动到左上角
  window.moveTo(0, 0);
}

7、resizeBy() 与 resizeTo()​

7-1、resizeBy()​

window.resizeBy(xDelta, yDelta)

功能：将当前窗口调整到一定的大小。

参数：

  • xDelta：窗口水平方向变化的像素值。
  • yDelta：窗口垂直方向变化的像素值。

示例：

// 缩小窗口
window.resizeBy(-200, -200);

7-2、resizeTo()​

window.resizeTo(aWidth, aHeight)

功能：动态调整窗口。

参数：

  • aWidth：表示新的 outerWidth。
  • aHeight：表示新的 outerHeight。

示例：

// 将窗口设置为整个屏幕的 1/4 大小（面积）
function quarter() {
  window.resizeTo(
    window.screen.availWidth / 2,
    window.screen.availHeight / 2
  );
}

8、getSelection()​

const selection = window.getSelection()

功能：表示用户选择的文本范围或光标的当前位置。

参数：无

返回值：Selection 对象，如果想转为字符串，可连接一个空字符串（""）或用 String.toString() 方法。

示例：

function foo() {
  let selObj = window.getSelection();
  console.log(selObj);
  let selRange = selObj.getRangeAt(0);
  // 其他代码
}

9、getComputedStyle()​

window.getComputedStyle(element, [pseudoElt])

功能：获取指定元素的计算样式。

参数：

  • element：用于获取计算样式的元素。
  • pseudoElt（可选）：指定一个要匹配的伪元素的字符串。

示例：

<style>
  #elem-container {
    height: 100px;
  }
</style>

<div id="elem-container"></div>

<script>
  let elem = document.getElementById("elem-container");

  let theStyle = window.getComputedStyle(elem, null);

  console.log(theStyle);
  console.log(theStyle.height);
</script>

控制台输出：

10、stop()​

window.stop()

功能：停止窗口加载。效果相当于点击了浏览器的停止按钮，由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

示例：

window.stop();

11、print()​

window.print()

打开打印对话框打印当前文档。

12、find()​

window.find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog)

功能：在页面中搜索指定的字符串。

参数：

  • aString：要搜索的字符串。
  • aCaseSensitive：搜索是否区分大小写的布尔值。
  • aBackwards：搜索方向是否为向上搜索的布尔值。
  • aWrapAround：是否进行循环搜索的布尔值。
  • aWholeWord 是否采用全字匹配搜索的布尔值。
  • aSearchInFrames：是否会搜索框架内的文本的布尔值。
  • aShowDialog：是否弹出一个搜索对话框。

返回值：true / false

13、matchMedia()​

mqList = window.matchMedia(mediaQueryString)

功能：表示指定媒体查询字符串的对象。

参数：

  • mediaQueryString：一个被用于媒体查询解析的字符串。

返回值：一个用来媒体查询的新 MediaQueryList 对象

示例：

let mql = window.matchMedia('(max-width: 600px)');
document.querySelector(".mq-value").innerText = mql.matches;

14、requestAnimationFrame()​

window.requestAnimationFrame(callback);

功能：要求浏览器在下次重绘之前调用指定的回调函数更新动画。

参数：

  • callback：下一次重绘之前更新动画帧所调用的函数。

返回值：一个 long 整数作为请求 ID，是回调列表中唯一的标识。

示例：

const element = document.getElementById('some-element-you-want-to-animate');
let start;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  // 这里使用 Math.min() 确保元素刚好停在 200px 的位置。
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

  if (elapsed < 2000) { // 在两秒后停止动画
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

requestAnimationFrame 主要是为了让页面动画效果能有一个统一的刷新机制，从而提高系统性能，改善视觉效果。

与 setTimeout 的区别在于，setTimeout 是设置一个固定的时间间隔，这个时间不一定与屏幕的刷新时间相同，可能导致丢帧卡顿；而 requestAnimationFrame 是由系统来决定回调函数的执行时机，执行步调与着系统的刷新频率同步，可以保证回调函数在屏幕的每次刷新间隔中只执行一次，不会导致丢帧卡顿。

15、postMessage()​

otherWindow.postMessage(message, targetOrigin, [transfer]);

功能：可以安全地实现跨源通信。

参数：

  • otherWindow：其他窗口的一个引用。
  • message：将要发送到其他 window 的数据。它将被结构化克隆算法序列化。
  • targetOrigin：指定哪些窗口能接收到消息事件，可以是字符串 *（无限制）或一个 URI。
  • transfer（可选）一串和 message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

示例：

// 执行下面代码，其他 window 可以监听分发的 message
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  // 这里不准确，chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin;
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

更多 postMessage() 相关请点击