javascript - JavaScript ファイルを条件付きで読み込む

Question

使用する JavaScript ファイルを決定する JS ステートメントが必要です。

私は1つのファイルを持っています:

<script type="text/javascript" src="js/jquery_computer.js"></script>

しかし、画面幅が 500px 未満の場合は、代わりに別のファイルを読み込みたい:

<script type="text/javascript" src="js/mobile_version.js"></script>

私はすべてを試しましたが、うまくいきません。

Answer 1

JS でそのマークアップを自分で作成する必要があります。このようなもの：

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (screen.width > 500)
{
    js.src = "js/jquery_computer.js";
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);

Answer 2

おそらく、 matchMedia.js を使用して、 jQuery.getScriptを使用してスクリプトをロードできます。

$(function(){
    if (matchMedia('only screen and (max-width: 500px)').matches) {
        $.getScript(...);
    }
});

Answer 3

組み込みの matchMedia API を使用することをお勧めします。

var script = document.createElement('script');
script.type='text/javascript';

if(window.matchMedia("(min-width:500px)").matches) {
  script.src = 'js/jquery.slitslider.js';      
}else{
  script.src = 'js/mobile_version.js';      
}

document.getElementsByTagName('head')[0].appendChild(script);

欠点は、IE < 10 ではサポートされていないことです。

Answer 4

これには jQuery は必要ありません。DOM で<script>タグを動的に作成するだけで十分です。

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.type = 'text/javascript';

if (<screen-width less than 500>)
    script.src = "js/mobile_version.js";
else
    script.src = "js/jquery_computer.js";

head.appendChild(script);

Answer 5

$.getScriptjQueryで使用できます

詳細はこちら