Window: resize event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

resize event fires when the document view (window) has been resized.

冒泡	No
可取消	No
接口	`UIEvent`
事件处理程序特性	`onresize`

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView ). Only handlers registered on the window object will receive resize 事件。

There is a proposal to allow all elements to be notified of resize changes. See 重置大小观测器 to read the draft document, and GitHub issues to read the on-going discussions.

范例

Window size logger

The following example reports the window size each time it is resized. Bear in mind that since the example is running in an <iframe> , you'll need to actually get the <iframe> to resize before you see an effect.

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}
window.onresize = reportWindowSize;

addEventListener equivalent

You could set up the event handler using the addEventListener() 方法：

window.addEventListener('resize', reportWindowSize);

规范

规范	状态
DOM (文档对象模型) 3 级事件规范 The definition of 'resize' in that specification.	过时
CSSOM (CSS 对象模型) 视图模块 The definition of 'resize' in that specification.	工作草案

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`resize` event	Chrome 1 1 Chrome does not emit a `resize` event on page load.	Edge 12 12 Prior to Edge 79, Edge emitted a `resize` event on page load. This is no longer the case.	Firefox 1 1 Prior to Firefox 68, Firefox emitted a `resize` event on page load. This is no longer the case.	IE 4	Opera 7 7 Opera does not emit a `resize` event on page load.	Safari 1.1	WebView Android 1 1 Webview does not emit a `resize` event on page load.	Chrome Android 18 18 Chrome does not emit a `resize` event on page load.	Firefox Android 4 4 Prior to Firefox 68, Firefox emitted a `resize` event on page load. This is no longer the case.	Opera Android 10.1 10.1 Opera does not emit a `resize` event on page load.	Safari iOS 1	Samsung Internet Android 1.0 1.0 Samsung Internet does not emit a `resize` event on page load.

图例

完整支持

另请参阅

GlobalEventHandlers.onresize

元数据

最后修改： Apr 9, 2020

在此页

范例

Window size logger

addEventListener equivalent

规范

浏览器兼容性

图例

另请参阅

相关话题