Q&A
scroll.jsは何かのライブラリでしょうか。公開されている物であれば、入手先を提示されたほうが根本的な解決につながると思います。
PC用とスマホ用で、読み込むJSを変えたい（画面サイズで条件分岐したい）。
やりたいこと
画面サイズ７６9px以上の場合のみ、head内でscroll.jsを読み込ませたい。
php
1<!Doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <title>sample site</title> 10 <link rel="stylesheet" href="reset.css" media="all"> 11 <link rel="stylesheet" href="common.css" media="all"> 12 <script src="jquery.js"></script> 13 <script> 14 var $win = $(window); 15 $win.on('load resize', function() { 16 var windowWidth = $win.width(); 17 if (windowWidth > 768) { 18 $('head').append('<script src="scroll.js"></script>'); 19 } else { 20 // スマホ用 21 } 22 }); 23 </script> 24</head> 25 26<body> 27・・・・ 28</body> 29
上記のように
php
1<script> 2 var $win = $(window); 3 $win.on('load resize', function() { 4 var windowWidth = $win.width(); 5 if (windowWidth > 768) { 6 $('head').append('<script src="scroll.js"></script>'); 7 } else { 8 // スマホ用 9 } 10 }); 11</script>
としましたが、うまく動きませんでした。
<script src="scroll.js"></script>
部分の記載方法が違うのかなと思い、調べてみたもののなかなか解決できなかったので、ご質問させていただきます。
●環境
HTML5、CSS3、jQuery v1.12.4
よろしくお願いいたします。
ありがとうございます。
公開されたものではありません。
ちなみに、head内に直接<script src="scroll.js"></script>を記載し、ファイルを読み込んだ場合は正常に動作いたします
回答2件
0
ベストアンサー
多分これで出来ますが、resizeの度に追加されることになるので、思った動作にならないと思います。
また、要素を削除しても動くため、削除すればよいという物ではありません。
根本的にscroll.jsの側で処理を分岐する必要があります。
【jquery - How to Append <script></script> in javascript? - Stack Overflow】
https://stackoverflow.com/questions/9413737/how-to-append-script-script-in-javascript
js
1var s = document.createElement("script"); 2s.type = "text/javascript"; 3s.src = "http://somedomain.com/somescript"; 4$("head").append(s);
投稿2018/12/24 09:22
総合スコア69398
ご回答いただきありがとうございました。
発想の転換で、jsサイドで処理してみるということは全く思いつきませんでした。
質問させていただいてよかったです。例を出していただき、とても勉強になりました。
0
jsファイルおよびscript記述は画面ロード時に全て読み込まれるので、単にappendしても実行にはなりません(過去にも似たような質問出てます)
やるなら.loadの方になるかと思います。
ですが、同じjsの中で画面サイズにより処理分岐かけた方が分かりやすいと思いますし確実です。
処理的に変わる場所が少ないのであれば引数等で対応すれば良いですし。
投稿2018/12/24 09:19
総合スコア80842
あなたの回答
tips
プレビュー
