このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Window: resize イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
resize イベントは、この文書のビュー (ウィンドウ) の大きさが変更されたときに発行されます。
一部の初期のブラウザーでは、resize イベントのハンドラーをすべての HTML 要素に設定することができました。現在でもonresize 属性やaddEventListener() を使用して、どの要素にもハンドラーを設定することができます。しかし、resize イベントはwindow オブジェクト (すなわちdocument.defaultView で返されるもの) でのみ発行されます。window オブジェクトに登録されたハンドラーのみが、resize イベントを受け取ります。
すべての要素が大きさの変更を通知できるようにする提案があります。Resize Observer で草稿のドキュメントを、GitHub issue で進行中の議論を読むことができます。
例
ウィンドウの大きさのログ出力
以下の例では、ウィンドウの大きさが変更されるたびに報告を出力します。この例は<iframe> 内で実行されているので、効果を見る前に実際に<iframe> の大きさを変更する必要があることを覚えておいてください。
<p> ブラウザーウィンドウを変更すると <code>resize</code> イベントを発行します。</p><p>ウィンドウの高さ: <span></span></p><p>ウィンドウの幅: <span></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 による同等の実装
イベントハンドラーを設定するためにaddEventListener() メソッドを使用することもできます。
window.addEventListener("resize", reportWindowSize);仕様書
| Specification |
|---|
| CSSOM View Module # eventdef-window-resize |