条件分岐して外部jsファイルを読み込みたい

条件分岐自体はうまくできたのですが、外部jsファイルをそれぞれ読むことができません。
どうしたらそれぞれ意図したものを表示できるのでしょうか？

###参考にさせていただいたサイト
https://web-yaro.net/jquery/153/
https://blog.10-plate.com/9431/

##やりたいこと
・横幅1024px以下　かつ　タブレットorスマホの場合　→SP.js
・横幅1024px以下　かつ　PCの場合　→　PC.js
・横幅1025px以上　→　PC.js

というふうにしたいのです。
2箇所に同じことを書くのはナンセンスかなとおもったため外部ファイルにまとめられないかなと思った次第です。

html
1<head>
2<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
4<script src="assets/js/device.js"></script>
5</head>

javascript
1
2//device.js
3
4$(window).on('load resize', function(){
5var windowWidth = $(window).width();
6var windowSm = 1024;
7if (windowWidth <= windowSm) {
8var ua = navigator.userAgent;
9//1024以下のタブレット＆スマホ
10  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
11$.ajax({
12         url: 'SP.js', 
13         dataType: 'script',
14         cache: false
15    });
16  }else {
17//1024以下のPC
18$.ajax({
19         url: 'PC.js', 
20         dataType: 'script',
21         cache: false
22    });
23
24  }
25}else{
26//1025以上のSP
27$.ajax({
28         url: 'PC.js', 
29         dataType: 'script',
30         cache: false
31    });
32}
33});

当方javascriptは初心者で、調べてもajaxを使用した上記のような書き方しか出てこず
動かなくて困っております。
お力を貸していただけたら幸いです。

行動規範の内容に同意します

回答3件

ベストアンサー

javascript
1$(window).on('load resize', function(){

リサイズ時にも読み込むようにしていると、幅を変えた拍子にPC.jsとSP.jsが両方読み込まれる事態となってしまいます。

「両者を1本のファイルに書いて、JavaScript内で幅など条件を見つつ動作するものを切り替えるようにする」方法をおすすめします。

投稿2021/01/06 10:13

maisumakun

総合スコア146018

yMarch

2021/01/06 14:21

ありがとうございます！なるほどです・・・。なかなか難しいということが分かりました！ご提案いただいたとおり、js内で条件分岐しながら設定してきたいと思います！

行動規範の内容に同意します

それぞれどういう処理が書かれているのか知らないですが、
「動的に読み込むjsファイルを変える」というやり方は選択しないと思います。

「userAgentによる分岐」を1ファイル（要件によって1メソッド）に書きます。

それにAjaxは「リクエストを送って実行結果をレスポンスとして得る」ので、
「読み込む」とは毛色が違います。scriptとしての役割は果たさないのでは。

投稿2021/01/06 08:44

編集2021/01/06 08:45

m.ts10806

総合スコア80875

yMarch

2021/01/06 08:53

わかりにくくてすみませんやりたいことは、・横幅1024px以下　かつ　タブレットorスマホの場合　→SP.js ・横幅1024px以下　かつ　PCの場合　→　PC.js ・横幅1025px以上　→　PC.js というふうにしたいのですが、一つのファイルで書こうとすると、「PC.,js」に入る部分に同じことを書かないといけないのかなと。それだったら外部ファイル化して1つにしたいなという気持ちです。こういうことは不可能なのでしょうか？ ※質問内容修正しました！

m.ts10806

2021/01/06 08:57

>一つのファイルで書こうとすると、「PC.,js」に入る部分に同じことを書かないといけないのかなと。どういう印象を受けてどういうことをするつもりでされたコメントなのでしょうか。先に書いたようにAjaxではscriptとしての役割は持てません。どうしてもファイル分けたいなら、それぞれのUserAgent用のページを作ってそこで読み込ませるか（つまりUserAgentによる振り分けは行わない）それぞれのファイル冒頭にUserAgentチェックを入れて大きなif文で囲うか、いずれかです。

yMarch

2021/01/06 09:06

すみません。当方js詳しくないので、よくわかっていないのですが、 https://web-yaro.net/jquery/153/ ↑こちらを参考にしました。この書き方は間違いということでしょうか？ちなみに、htmlに<device.js>の内容を直接書いても動かなかったです。。。

maisumakun

2021/01/06 10:17

> Ajaxではscriptとしての役割は持てません。いえ、dataType: 'script'とすると、受け取ったJavaScriptを実行します。 https://api.jquery.com/jquery.ajax/

m.ts10806

2021/01/06 10:57

>dataType: 'script' あまり使わないものだったので認識がありませんでした。ありがとうございます。

行動規範の内容に同意します

js処理は予め読んでおいて、load resizeで変数を切り換えて処理を変えればよいのでは？
結局dataTypeで戻ってくるのはソースとして評価された
テキストデータでしか無いので

投稿2021/01/06 09:02

yambejp

総合スコア116724

yMarch

2021/01/06 09:25

ありがとうございます。うーん、難しいですね！笑参考サイトを見てやってみたのですが、そもそもAjaxでやるというのはよろしくないということなのでしょうか。変数で切り替えるというのは私にはハードルが高すぎるので、ベタにファイルをそれぞれ用意しようかなぁ…。

maisumakun

2021/01/06 10:19 編集

> 結局dataTypeで戻ってくるのはソースとして評価されたテキストデータでしか無いのでいえ、JavaScriptとしての実行を行うとのことです。 https://api.jquery.com/jquery.ajax/ https://qiita.com/butchi_y/items/02f4ffd3b51055bcf536

行動規範の内容に同意します

あなたの回答