JavaScriptでブラウザのリサイズでページを更新

WEB制作、マーケティングに関する情報をお届けします。

JavaScriptでブラウザのリサイズでページを更新

2025.02.19

カテゴリ：WEB制作

タグ：

JavaScript

サイト制作をしているとiframeや外部の3Dモデリングなどを表示させる場合があります。
これらはブラウザのリサイズ時には反映されない場合もあり、iframeの場合はスクロールバーが表示されたり、一部が消えた状態になったりすることがあります。
特に多いのはHubspotなどで作成した埋め込みのフォームを使用した際にスクロールバー表示になってしまう場合です。
そんな時の対策としてリサイズ時にリロードをかける方法を紹介します。

デモを見る

コードを紹介

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リサイズでリロード</title>
</head>
<body>
    <p>ウィンドウのサイズを変更すると、リロードされます。</p>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let initialWidth = window.innerWidth;
            let resizeTimeout;

            window.addEventListener("resize", function () {
                clearTimeout(resizeTimeout);

                resizeTimeout = setTimeout(function () {
                    const currentWidth = window.innerWidth;
                    if (initialWidth !== currentWidth) {
                        console.log("画面サイズが変更されたためリロードします。");
                        location.reload();
                    }
                }, 200);
            });
        });
    </script>
</body>
</html>

コードを解説

JavaScript

ページが読み込まれたら実行します。

document.addEventListener("DOMContentLoaded", function () {
});

ページが読み込まれた際のウィンドウ幅を保存しておきます。

let initialWidth = window.innerWidth;

ブラウザ幅をドラッグでリサイズしている時はイベントが連続して発生してしまうためタイマーを設置してリサイズ後に実行させます。
そのための変数を作成しておきます。

let resizeTimeout;

ウィンドウのリサイズを感知します。

window.addEventListener("resize", function () {
});

既存のタイマーがあればクリアして、最後のリサイズのみ処理を実行します。

clearTimeout(resizeTimeout);

リサイズが終了してから200ms後に以下の処理を実行、現在のウインドウを取得、初期に取得した幅が異なる場合のみ実行させます。

window.addEventListener("resize", function () {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function () {
        const currentWidth = window.innerWidth;

        if (initialWidth !== currentWidth) {
            console.log("画面サイズが変更されたためリロードします。");
            location.reload();
        }
    }, 200);
});

まとめ

以上、『JavaScriptでブラウザのリサイズでページを更新』でした。
頻繁に使用するものではありませんがどうしてもリロードでしか正しく表示できない場合には重宝するかと思います。
今回紹介したものに非同期通信を組み合われば部分的に読み込みが可能になりますのでリロードでユーザー体験を損いたくない場合などは活用できるかと思います。