ジェイクールの更新テクニック

ユーザーエージェント判別等で読み込ませるjavascriptを変える記述をした時の凡ミス

スマートフォンやタブレットでのアクセス時に異なるcssを読み込ませるシーンはよくありますが、
異なるjavascriptを読み込ませることもあると思います。

UA判別でjavascriptファイルを変えようとサクッと下記を記述したところ、

<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
document.write('<script type="text/javascript" src="/js/sp.js"></script>');
}else{
document.write('<script type="text/javascript" src="/js/pc.js"></script>');
}
})();
</script>

ブラウザで確認すると「’);}」の文字が出ている… 
何かのタグの閉じ忘れか表記ミスか?と疑いましたが、

そもそも

<script>~</script>

で囲まれたコードなので、

その中に

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

こんな記述があれば、親コードとソース指定の閉じタグを混同し、
当然解釈はおかしくなります。

というわけで、
「document.write」部、javascriptソース記述の閉じタグの/を半角の¥マークでエスケープし、文字列として認識させます。

<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
document.write('<script type="text/javascript" src="/js/sp.js"><¥/script>');
}else{
document.write('<script type="text/javascript" src="/js/pc.js"><¥/script>');
}
})();
</script>

※上記コードは全角の¥で記載していますが、実際には半角を使用します。

プログラミングに慣れていれば陥らないミスですが、
念のため備忘録として…