JavaScriptでリンク先をPCではポップアップウィンドウで開きモバイルでは通常通り別タブで開く

JavaScriptでリンク先をPCではポップアップウィンドウで開きモバイルでは通常通り別タブで開く:

管理画面でモバイルの場合は画面が狭いのでページを別タブで開きたいが、PCでは画面が広いのでポップアップウィンドウで表示したい場合がある。そんな時のサンプルコードです。

<ul> 
  <li><a href="http://localhost/a.html" class="popup" target="_blank"></a></li> 
  <li><a href="http://localhost/b.html" class="popup" target="_blank"></a></li> 
  <li><a href="http://localhost/c.html" class="popup" target="_blank"></a></li> 
</ul> 

(function() { 
  // windowFeaturesオプションには多くの設定値があるがモダンブラウザでは無視されている 
  // 横幅と縦幅は無視されないのでそれだけ設定している 
  // サイズはブラウザの表示領域縦横の50%を確保する 
  let option = { 
    width: window.innerWidth * 0.5, 
    height: window.innerHeight * 0.5 
  }; 
 
  document.querySelectorAll('a.popup').forEach(function(a) { 
 
    a.addEventListener('click', function(event) { 
 
      // ポップアップウィンドウの設定 
      let name = a.href + "の名前だよ"; 
 
      // 下記のモバイルデバイスのいずれにも一致しないかをboolで返す 
      let isNotMobile = ["iPhone", "iPod", "Android", "Mobile"].filter(function(key) { 
        return navigator.userAgent.indexOf(key) > 0; 
      }).length === 0; 
 
      // PCではポップアップウィンドウで表示してイベントキャンセル（モバイルデバイスでは普通に開く） 
      if(isNotMobile) { 
        window.open(a.href, name, Object.keys(option).map(function(key) { return key + "=" + option[key]; }).join(",")).focus(); 
        event.stopPropagation(); 
        event.preventDefault(); 
      } 
    }); 
  }); 
})(); 

最近フロントエンドのこと書かなくなっちゃって寂しいのでちょっと書いていきます。