レスポンシブ PCとSPでJSを切り替えたい

Question

実現したいこと

徐々にブラウザを狭めていったときに、PCとSPのHTMLを切り分けて読み込んでいるのですが、
PCの時には、このプラグインを読む。
SPの時には、このプラグインは読まない。

のような処理を書きたいです。

やってみたこと

iFrameでHTMLもJSも切り替えてしまう。　＝＞　IEで動かなくなる
$("body").load("pc.html");
$("body").load("sp.html");
のようにして、データを切り替える。

↑問題点：
JSの切り替え方がわからない。

最後

JS jQueryは、全くの初心者のため
なにか別の案などありましたら教えていただきたいです。

Comments

[x_x]

IE で動かなくなるという iFrame の処理はどのように記述したのでしょうか？

Answer 1

JSの切り替え方がわからない。

一度ページに呼び出されたJavaScriptはページを再読み込み（リロード）するまで削除できません。
どちらのコードも読み込んだ上で、プラグインを適用したり解除したりという処理を書く必要があります。
（もしくは画面サイズが変わるたびに強制リロードという悪手もあります）

Answer 2

// メディアクエリ（この場合、768px以上をPCとする）
const mediaQuery = matchMedia('(min-width: 768px)')

// メディアクエリ判定関数
const mediaQueryDetection = mq => {
  if (mq.matches) {
    $("body").load("pc.html");
  } else {
    $("body").load("sp.html");
  }
}

// ページ読み込み時
mediaQueryDetection(mediaQuery);

// ウィンドウリサイズ時
mediaQuery.addListener(mediaQueryDetection);

matchMedia を使えば簡単です。

Answer 3

ウィンドウサイズで判断するのはいかがでしょうか？
〇〇px以上の場合はPC,それ以下の場合はSPなどの切り替えでスクリプト自体は切り替えれると思います。

if ($(window).width() >= 768) { //サイズは例
 // PC
} else {
 // SP
}

https://api.jquery.com/width/

Comments

[BlackSiri]

ご回答ありがとうございます。
実際にやってみたのですが、Resizeするたびにその条件式でJSを読んだりすると複数個読まれたりするようです...