[js]UAで読み込むjsファイルを振り分ける方法

Reading Time: < 1 minute

はい

Contents

1 参考
2 構成
3 中身
4 なんでこうしたか
5 例えば

参考

タブレット系をUserAgentで判別する | 初心者SEのとりあえずメモ日記

構成

index.html	読み込むやつ
trigger.js	UA判別して指定ファイルを読み込む
sp.js	UA別にやりたいこと
tablet.js	UA別にやりたいこと
pc.js	UA別にやりたいこと

こういうのがあるとする。

中身

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,maximum-scale=1.0">
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="trigger.js"></script>
</head>

<head>

</head>

$(function(){
	var ua = navigator.userAgent;
	if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){
	    alert('タブレット');
		$.ajax({
			url: 'tablet.js',
			dataType: 'script',
			cache: false
		});
	} else if ((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ua.indexOf('iPhone') > 0 || ua.indexOf('Blackberry') > 0 || ua.indexOf('iPhone') > 0){
	    alert('スマートフォン');
		$.ajax({
			url: 'sp.js',
			dataType: 'script',
			cache: false
		});
	} else {
	    alert('その他');
		$.ajax({
			url: 'pc.js',
			dataType: 'script',
			cache: false
		});
	}
});

$(function(){

var ua = navigator.userAgent;

if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){

alert('タブレット');

$.ajax({

url: 'tablet.js',

dataType: 'script',

cache: false

});

} else if ((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ua.indexOf('iPhone') > 0 || ua.indexOf('Blackberry') > 0 || ua.indexOf('iPhone') > 0){

alert('スマートフォン');

$.ajax({

url: 'sp.js',

dataType: 'script',

cache: false

});

} else {

alert('その他');

$.ajax({

url: 'pc.js',

dataType: 'script',

cache: false

});

}

});

Androidのスマホとタブレットの違いは「mobile」の有無なんだって。

なんでこうしたか

普段はブラウザ幅で切り替えてる。
でもifでひたすら分けてると動作がおかしくなったりして、原因漁るのがめんどくさい。
ファイル分けちゃって読み込むのを分けちゃえばいいなって。
今回のでやると例えばPCで幅を狭めた時に機能しないんだけど、そういう輩のことは無視してしまえみたいな。
まあ使い分けで。

例えば

$(window).on('load resize', function(){
	"use strict";
	var w = $(window).width();
	var x = 767;
	if (w <= x) {
		$.ajax({
			url: 'sp.js',
			dataType: 'script',
			cache: false
		});
	}else{
		$.ajax({
			url: 'pc.js',
			dataType: 'script',
			cache: false
		});
	}
});

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

"use strict";

var w = $(window).width();

var x = 767;

if (w <= x) {

$.ajax({

url: 'sp.js',

dataType: 'script',

cache: false

});

}else{

$.ajax({

url: 'pc.js',

dataType: 'script',

cache: false

});

}

});

こういうのもありかも知らんけど、
毎度毎度読み込み先変えるのめんどくさいし、
割り切っちゃえばむしろ精神衛生に良いよなって。