スマートフォンやタブレットでのアクセス時に異なる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>
※上記コードは全角の¥で記載していますが、実際には半角を使用します。
プログラミングに慣れていれば陥らないミスですが、
念のため備忘録として…

