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

2015.01.04

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

サンプルコード

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

　

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

processing-change-of-every-browser-on-tumblr01

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

processing-change-of-every-browser-on-tumblr02

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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タグを使用しないようにするのが一番よさそうという結論になりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>

processing-change-of-every-browser-on-tumblr03

　

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

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930