MENU

【JavaScript】特定のブレイクポイントからブラウザを広げたときだけリロードさせる

ウィンドウサイズを変えるとサイトをリロードさせていたけど、毎回リロードすると結構邪魔なので、設定したブレイクポイントからウィンドウが広かったときにだけリロードするようにしてみた。

この記事を読んでる人におすすめの書籍

スクリプト

<script>
  const breakPoint = 960;
  let resizeFlag;

  window.addEventListener('load',()=>{
    if( breakPoint < window.innerWidth){
      resizeFlag = false;
    }else{
      resizeFlag = true;
    }
    resizeWindow();
  },false);

  const resizeWindow = () =>{
    window.addEventListener('resize',()=>{
      if( breakPoint < window.innerWidth && resizeFlag){
        window.location.reload();
        resizeFlag = false;
      } 
      else if ( breakPoint >= window.innerWidth && !(resizeFlag)) {
        resizeFlag = true;
      }
    },false);
  }
</script>

解説

ブレイクポイントの変数とリサイズ真偽の変数を宣言する。

  const breakPoint = 960;
  let resizeFlag;

変数var、let、constの違いはこちら。

JavaScript var/let/constによる変数宣言

ウィンドウがロードされた時点で変数「breakPoint」で設定した数値よりウィンドウが大きい場合は、変数「resizeFlag」の値がfalse、逆にウィンドウが小さい場合は値がtrueになる。

  window.addEventListener('load',()=>{
    if( breakPoint < window.innerWidth){
      resizeFlag = false;
    }else{
      resizeFlag = true;
    }
    resizeWindow();
  },false);

ここでウィンドウサイズを変えるとresizeWindow();が発動する。

  const resizeWindow = () =>{
    window.addEventListener('resize',()=>{
      if( breakPoint < window.innerWidth && resizeFlag){
        window.location.reload();
        resizeFlag = false;
      } 
      else if ( breakPoint >= window.innerWidth && !(resizeFlag)) {
        resizeFlag = true;
      }
    },false);
  }

resizeWindow();の内容はウィンドウがリサイズした時点で変数「resizeFlag」の値がtrue、(つまりリサイズを始めたときのウィンドウサイズが変数「breakPoint」の数値より小さく)かつ、リサイズ後のウィンドウサイズが変数「breakPoint」の数値を超えたらリロードする。

この記事を読んだ人におすすめの書籍

nanimonai

プログラム書く方が楽しいデザイナーです。デザイン事務所→フリーランス→スタートアップ入社→フリーランス(現在)。 全然更新しないのでブログは向いてないと思いつつなんとかやってます。 よければTwitterのフォローもお願いします。

カテゴリー

キーワード

デザインに必須のフリー素材サイト



関連記事