浏览器window对象的属性与方法

JyLie 2017-06-12 APIBOM

# 前言

window 对象 是客户端 JavaScript 脚步的顶层对象之一，只要打开浏览器窗口，不管该窗口中是否有打开的网页，当存在 BODY、FRAMESET、FRAME、iframe 元素时，浏览器都会自动建立 window 对象的实例。

此外，window 对象的实例也可由 window.open() 方法动态创建。

由于 window 对象 是其它大部分对象的共同祖先，在调用 window 对象的方法和属性时，可以省略 window 对象的引用。

window.document.write()
// 可简写为
document.write()。

1
2
3

在窗口中觖发本窗口对象的任何方法和属性时可以省去窗口的实例名称。

例如给当前的 myWin 窗口设置 status 属性时，可以只用 status 而不用 myWin.status。

但是，在事件处理中调用 location 属性、close()方法或 open()方法时必须使用实例名称。

下面会记录常用 window 的属性和方法

# window 对象常用方法

# window.getComputedStyle(element, [pseudoElt]);

返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。

pseudoElt 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或 null）

let elem1 = document.getElementById('elemId');
let style = window.getComputedStyle(elem1, null);

// 它等价于
let style = document.defaultView.getComputedStyle(elem1, null);

1
2
3
4
5

# window.getSelection()

返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。

如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。

let selObj = window.getSelection();
console.log(selObj);
var selectedText = selObj.toString();
console.log(selectedText);

1
2
3
4

# window.open([url],[name],[specs],[replace])

用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法格式：window.open(URL, 窗口名称, 窗口风格，新增或替换浏览历史)
小技巧：该方法经常用于在打开一个网页时自动打开另一个窗口。
specs 风格参数说明：
- channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限 IE 浏览器
- directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限 IE 浏览器
- fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限 IE 浏览器
- height=pixels 窗口的高度。最小.值为 100
- left=pixels 该窗口的左侧位置
- location=yes|no|1|0 是否显示地址字段.默认值是 yes
- menubar=yes|no|1|0 是否显示菜单栏.默认值是 yes
- resizable=yes|no|1|0 是否可调整窗口大小.默认值是 yes
- scrollbars=yes|no|1|0 是否显示滚动条.默认值是 yes
- status=yes|no|1|0 是否要添加一个状态栏.默认值是 yes
- titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用 HTML 应用程序或一个值得信赖的对话框.默认值是 yes
- toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是 yes
- top=pixels 窗口顶部的位置.仅限 IE 浏览器
- width=pixels 窗口的宽度.最小.值为 100
注意事项

为了避免 window.open 后暴露窗口句柄，从而因此不必要的危险，建议在创建 window 实例后将 opener 置空

/**
 * 打开一个窗口
 * @param { string } url
 * @param { string } windowName
 * @param { number } width
 * @param { number } height
 */
export function openWindow(url, windowName, width, height) {
  var x = parseInt(screen.width / 2.0) - width / 2.0;
  var y = parseInt(screen.height / 2.0) - height / 2.0;
  var isMSIE = navigator.appName == 'Microsoft Internet Explorer';
  if (isMSIE) {
    var p = 'resizable=1,location=no,scrollbars=no,width=';
    p = p + width;
    p = p + ',height=';
    p = p + height;
    p = p + ',left=';
    p = p + x;
    p = p + ',top=';
    p = p + y;
    window.open(url, windowName, p);
  } else {
    var win = window.open(
      url,
      windowName,
      'top=' +
        y +
        ',left=' +
        x +
        ',scrollbars=' +
        scrollbars +
        ',dialog=yes,modal=yes,width=' +
        width +
        ',height=' +
        height +
        ',resizable=no'
    );
    eval('try { win.resizeTo(width, height); } catch(e) { }');
    win.focus();
    win.opener = null;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# window.requestAnimationFrame(callback)

一般用户绘制 canvas 动画。让浏览器在下次重绘之前调用指定的回调函数更新动画。

回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

# window.print()

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

# window.close()

用于关闭浏览器窗口。

# window.blur()

将焦点移出顶层窗口。

当与 focus 方法合用时必须小心，因为可能导致焦点不断移进移出。

# window.focus()

功能：使窗口中得到焦点。

当与 blur 方法合用时必须小心，因为可能导致焦点不断移进移出。

# window.scroll()

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

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

window.scrollTo 实际上和该方法是相同的。

想要重复地滚动某个距离，请使用 window.scrollBy。

# window.scrollTo()

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

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

# window.moveBy(deltaX, deltaY) 、window.moveTo(x, y)、window.resizeBy(xDelta, yDelta) 跳转窗口大小

根据指定的值，移动当前窗口。

注意事项

从 Firefox 7 开始，依据下面的规则，不能再移动一个浏览器里的窗口。

不能移动非 window.open 创建的窗口或 Tab。
当一个窗口里有多于一个 Tab 时，不能移动该窗口。

# window.postMessage()

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

通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain 设置为相同的值) 时，这两个脚本才能相互通信。

# window.stop()

效果相当于点击了浏览器的停止按钮。

由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

# window.alert(string)

用于显示带有一条指定消息和一个确认按钮的警告框

# window.confirm(string)

用于显示一个带有指定消息和确认及取消按钮的对话框。

如果访问者点击"确定"，此方法返回 true，否则返回 false。

返回 boolean 类型

var isRead = window.confirm('是否阅读?');
isRead ? console.log('Yes') : console.log('No');

1
2

# window.prompt([string],[defaultText])

用于显示可提示用户进行输入的对话框。

当用户单击“确定”按钮时，返回用户输入的字符串，

当单击“取消”按钮时，返回 null 值。

var isRead = window.prompt('是否阅读?', '已确定');
console.log(isRead);

1
2

# window.setTimeout(function, milliseconds, [param1], [param2], [...])

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

返回一个 ID 句柄

温馨提示：
- 1000 毫秒= 1 秒。
- param 为传给执行函数的其他参数，且 ie10+开始支持

setTimeout(
  function(...params) {
    console.log(`input params: ${params}`);
  },
  1000,
  { name: 'JyLie' },
  18
);

1
2
3
4
5
6
7
8

# window.clearTimeout(id_of_settimeout)

取消由 setTimeout() 方法设置的定时操作

# window.setInterval(function, milliseconds, [param1], [param2], [...])

使用方法与 setTimeout 相似

区别在于 setInterval 在指定周期执行一次 function

# window.clearInterval(id_of_setinterval)

取消由 setInterval() 函数设定的定时执行操作

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

在一个页面中搜索指定的字符串.

# window.matchMedia()

返回一个新的 MediaQueryList 对象，表示指定的媒体查询 (en-US)字符串解析后的结果。

var mql = window.matchMedia('(max-width: 600px)');

var el = document.createElement('div');
el.innerText = mql.matches;

document.documentElement.appendChild(el);

1
2
3
4
5
6

# window 已废弃方法

# window.getDefaultComputedStyle()

给出元素的所有 CSS 属性的默认计算值。

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
替换方法为：window.getComputedStyle()

# window.back()

使浏览器在会话历史中向后移动一个页面。

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
替换方法为：window.history.back()

# window.forward()

使浏览器在会话历史中向前移动一个页面。

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
替换方法为：window.history.forward()

# window.home()

将浏览器返回到主页。

# window.dump(string)

将信息打印到 (本地) 控制台（console）

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
替换方法为：console.log(string)

# window.captureEvents()

注册捕捉事件。

# window.dispatchEvent()

触发捕捉事件。

# `window 对象` 的属性

# window.closed

只读属性。

表示所引用的窗口是否关闭。

返回 Boolean

isClosed = windowRef.closed;

# window.console

只读属性。

浏览器控制台输出日志信息。

仅应用于调试，并不应该用来给最终用户呈现信息。

# window.crypto

只读属性。

返回与全局对象关联的 Crypto 对象。

此对象允许网页访问某些加密相关服务。

兼容性：ie11+，且 ie 浏览器 Workers 无法使用。

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

# window.devicePixelRatio

不是 W3C 标准

只读属性。

返回当前显示设备的物理像素分辨率与 CSS 像素分辨率之比。

可以使用 window.matchMedia() 检查 devicePixelRatio 的值是否发生更改（例如，如果用户将窗口拖动到带有不同的像素密度）。

# window.document

只读属性。

返回当前窗口内的文档节点（document）

注意事项：

从 Firefox 3 和 IE7 开始,访问其他页面内的文档节点会受到同源策略的影响.

# window.frameElement

只读属性。

返回嵌入当前 window 对象的元素(比如或者 <object>)</object>

如果当前 window 对象已经是顶层窗口,则返回 null.

# window.frames

只读属性。

返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。

# window.history

只读属性。

用来获取 History 对象的引用。

# window.location

只读属性。

返回一个 Location 对象。

href 设置或获取整个 URL 为字符串。
host 设置或获取 URL 的 hostname 和 port 。
hostname 设置或获取 location 或 URL 的主机名称部分。
pathname 设置或获取对象指定的文件名或路径。
port 设置或获取与 URL 关联的端口号码，（80 或 443）。
protocol 设置或获取 URL 的协议部分，返回所使用的 web 协议（http:// 或 https://）
search 设置或获取 URL 属性中跟在问号?后面的部分。
- window.location.href
hash 设置或获取 URL 属性中跟在井号#后面的部分。
- 监听方式 body.addEventListener("hashchange", myScript)

# 浏览器仓库

window.localStorage
window.sessionStorage

# window.navigator

只读属性。

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

# window.length

只读属性。

返回当前窗口中包含的框架数量(框架包括 frame 和 iframe 两种元素).

# window.name

获取/设置窗口的名称。

窗口的名字主要用于为超链接和表单设置目标（targets）。窗口不需要有名称。

# window.screen

只读属性。

返回当前 window 的 screen 对象。

# window.menubar

只读属性。

返回一个可以检测 visibility 属性的 menubar 对象。

# window.personalbar

只读属性。

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

# window.scrollbars

只读属性。

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

# 相关文献

MDN-Window 对象
MDN-ScrollToOptions

JyLie