Tumblrでブラウザ毎に処理を分ける

Tumblrのテキスト投稿で、scriptタグが使用できるみたいだったので、ブラウザ毎で内容の出し分けできるか実験してみました。

サンプルコード

Tumblrのテキスト投稿(HTMLタグの方)で以下の内容で投稿してみました。
ユーザーエージェントでスマホ・IE・その他を分類して、それぞれで埋め込むHTMLとalertの内容を
変更する想定です。

<script type="text/javascript">
var ua = navigator.userAgent,
	isSp = ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0),
	isIE = ua.match(/MSIE/) || ua.match(/Trident/);
if (isSp) {
	// スマホのとき
	document.write('<p>スマホです</p>');
	alert('スマホです');
} else if(isIE) {
	// IEの時
	document.write('<p>IEです</p>');
	alert('IEです');
} else {
	// スマホ・IE以外の時
	document.write('<p>スマホ・IE以外です</p>');
	alert('スマホ・IE以外です');
}
</script>

結果は以下のように表示され、想定通りの表示になりませんでした。

テキスト投稿だとpタグが自動で挿入されてしまうので、document.writeでpタグを埋め込むと
そこでpタグが終了していると認識され、pタグ内に含まれるscriptタグもその手前で終了している、
と判別されてしまうのが原因のようです。(予想ですが)

scriptタグをdivタグで囲うことで、pタグが自動挿入されなくなり、想定通りの表示になりましたが、
今度は埋め込むのがdivタグの時にうまくいきませんでした。

<div>
<script type="text/javascript">
var ua = navigator.userAgent,
	isSp = ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0),
	isIE = ua.match(/MSIE/) || ua.match(/Trident/);
if (isSp) {
	// スマホのとき
	document.write('<div>スマホです</div>');
	alert('スマホです');
} else if(isIE) {
	// IEの時
	document.write('<div>IEです</div>');
	alert('IEです');
} else {
	// スマホ・IE以外の時
	document.write('<div>スマホ・IE以外です</div>');
	alert('スマホ・IE以外です');
}
</script>
</div>

最終的に、自動挿入されるpタグは放置で、document.writeでタグを埋め込むの際にpタグを使用しないようにするのが一番よさそうという結論になりました。

<script type="text/javascript">
var ua = navigator.userAgent,
	isSp = ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0),
	isIE = ua.match(/MSIE/) || ua.match(/Trident/);
if (isSp) {
	// スマホのとき
	document.write('<div class="wrap">');
	document.write('<div>スマホです</div>');
	document.write('</div>');
	alert('スマホです');
} else if(isIE) {
	// IEの時
	document.write('<div class="wrap">');
	document.write('<div>IEです</div>');
	document.write('</div>');
	alert('IEです');
} else {
	// スマホ・IE以外の時
	document.write('<div class="wrap">');
	document.write('<div>スマホ・IE以外です</div>');
	document.write('</div>');
	alert('スマホ・IE以外です');
}
</script>

ただ、使う場面によっては対応方法の変更が必要になります。