###前提・実現したいこと
スマートフォン幅、パソコン幅で読み込む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ファイルを切り替えるといった情報がネット上にあまり見つからなかったこともあり、良い手法ではないといったことはありますか?
その他もし良い方法がございましたらご教示いただけますと感謝いたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/26 11:07
2017/11/26 11:13
2017/11/26 12:38