質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

7677閲覧

Window幅によって読み込むJavaScriptファイルを動的に切り替える

umauman

総合スコア57

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/11/26 10:34

編集2022/01/12 10:55

###前提・実現したいこと
スマートフォン幅、パソコン幅で読み込むJavaScriptファイルを切り替えたいのですが、うまくいきません。
Window幅を変更(Window Resize)した際に切り替えたいと思っています。
ネット上で調べて記述をしてみましたが、解決しませんでした。

  • 768px以上 → 「pc.js」を読み込みたい
  • 767px以下 → 「sp.js」を読み込みたい
  • Window幅を変更した時にも変更させたい

###HTMLファイル

html

1<head> 2 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 3 <!--下記の switch.js に切り替え用のスクリプトを記述しています --> 4 <script src="switch.js" type="text/javascript"></script> 5</head>

###うまくいかないソースその①(jQuery)
下記の場合、PC、スマートフォンでファイルが切り替わらない以前に「pc.js」、「sp.js」そのものがまったく読み込みされません。
ちなみに「$(window).on('load resize', function(){…}」の囲み部分を削除しても読み込みされませんでした。

javascript

1 2(function($){ 3 4 5$(window).on('load resize', function(){ 6 7 if (window.matchMedia( '(min-width: 768px)' ).matches) { 8 9 $.ajax({ 10 url: 'pc.js', 11 dataType: 'script', 12 cache: false 13 }); 14 } else { 15 $.ajax({ 16 url: 'sp.js', 17 dataType: 'script', 18 cache: false 19 }); 20 }; 21 22}); 23 24 25})(jQuery);

###うまくいかないソースその②(JavaScript)
下記の場合「PC」、「スマートフォン」幅でJavaScriptファイルが切り替わります。
ただ、Window幅を変更した際にファイルが切り替わりません。
Window幅を変更した後にページをリロードすると、切り替わります。

javascript

1 2(function(){ 3 4 5var s = document.createElement("script"); 6s.type = "text/javascript"; 7$(function(){ 8 // Window width default 9 var egwidth = $(window).width(); 10 if (egwidth <= 768) { 11 s.src = "sp.js"; 12 document.getElementsByTagName("head")[0].appendChild(s); 13 } else if (egwidth > 768) { 14 s.src = "pc.js"; 15 document.getElementsByTagName("head")[0].appendChild(s); 16 } 17 18 // Window width resize with pc 19 var timer = false; 20 $(window).resize(function() { 21 if (timer !== false) { 22 clearTimeout(timer); 23 } 24 timer = setTimeout(function() { 25 var egwidth = $(window).width(); 26 if (egwidth <= 768) { 27 s.src = "sp.js"; 28 document.getElementsByTagName("head")[0].appendChild(s); 29 } else if (egwidth > 768) { 30 31 s.src = "pc.js"; // pc向けjsファイルを指定 32 document.getElementsByTagName("head")[0].appendChild(s); 33 } 34 }, 200); 35 }); 36}); 37 38 39})();

###補足情報
そもそもWindow幅により読み込むJavaScriptファイルを切り替えるといった情報がネット上にあまり見つからなかったこともあり、良い手法ではないといったことはありますか?
その他もし良い方法がございましたらご教示いただけますと感謝いたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

良い手法ではないといったことはありますか?

はい、良くない手法です。というのも、「読み込むファイルだけ」切り替える方法に頼ると、幅を途中で変えた場合に、結局は両方共読み込まれて両方のJavaScriptが効いてしまうという、意図しない結果となるからです。あとからJavaScriptを外す、というのも現実的ではありません。

PC版とスマートフォン版で行う具体的な内容にもよりますが、たとえば「イベントハンドラ内部で幅をチェックして、幅が違えば処理を脱出する」というようにすれば、ファイルを切り替えなくても共有できます。

投稿2017/11/26 10:47

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umauman

2017/11/26 11:07

早速ご回答いただきましてありがとうございます。 ご回答の内容をあまり理解できていない可能性がありますが、 例えば、下記のような感じで各ウィンドウ幅で明確に対応する処理がある場合は記述がしやすいです。 ただ、そういったものでは無いものが多く、困っております。 このような対応する処理がある場合は記述がしやすいです。 ↓↓↓ $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){ $('.xxx').addClasss('yyy'); //スマートフォン処理 } else { $('.xxx').removeClass('yyy'); //PC処理 } }); >幅が違えば処理を脱出する 例えば 「else」の方で何も処理をさせたくなかったり、対応する処理が特に無い場合 おっしゃっている「幅が違えば処理を脱出する」にあたることになりますでしょうか? その場合、どのように記述をすれば良いかヒントを教えてはいただけないでしょうか?
maisumakun

2017/11/26 11:13

「if( window.matchMedia('(max-width:767px)').matches ) return;」と書いてしまえば、それ以降は767ピクセル以下の幅の環境では実行されなくなります。
umauman

2017/11/26 12:38

何度もありがとうございます。 ヒントを参考に色々と試してみているのですが、動作がうまくいきません。 何か根本的に間違っているような気もします。 下記2つを試してみました。 ==== $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){ $('.xxx').on('click' function(){ //SPでの処理処理 }); } else if( window.matchMedia('(min-width:768px)').matches ){ $('.xxx').on('click' function(){ return; //PCでは何も処理をしない }); } }); ==== $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){ $('.xxx').on('click' function(){ //SPでの処理処理 }); return; //←PCでは何も処理しないように記述 } });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問