2020/11/01 14:33

複数のJavascriptファイルをPC表示だけ読込んで、スマホの時は読込ませない記述方法

けっこう強引というか原始的な書き方で実装してみましたが、恐らくベストプラクティスではないのであくまで「こういうやり方もあるね」くらいの感じで…

ファイル1つとかだとajax使ったりするやり方があるっぽいですが、複数のファイルとなると、なかなか参考になりそうな記事も探せなくて、結局こういう実現方法になってしまいました。

実現したい事

・PCではJavascriptファイル（test.js、test2.js、test3.js）を読み込みたい

・スマホ時はJavascriptファイル（test.js、test2.js、test3.js）を読み込みたくない

実践

まず、html側で出力用の場所を作りました。

スクリプトファイルなのでhead内に入れるのがセオリーかもしれませんが、body閉じ前とかにあえて記述するパターンもあると思うので今回は自由な場所に吐き出せるような形で。

【HTML】


<div id="output"></div>

出力場所が決まったら、後はscriptでウィンドウサイズ767px以下の時の処理を書く。

【Javascript】


<script>
$(function(){
// ウィンドウサイズ767以上のみ読込
if ($(window).width() > 767 ) {
  var request = '<script defer src="test.js"/><script defer src="test2.js"/><script defer src="test3.js"/>';
  $('#output').html(request);
};
});
</script>