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」の数値を超えたらリロードする。