Program

jQuery Mobile + document.write() で真っ白け

jQuery Mobileで妙なハマり方をしました。というわけで、メモ。
※以降、jqmと書きます。

とあるスクリプトとjqmの両方を読み込ませると、画面が真っ白になる。

スクリプトの中では”document.write() ”が使われています。
どうやらwriteした中身を「ページ」として生成してしまう様子。

<p>文章1</p>

<script type='text/javascript'>
    document.write('<p>文章2</p>');
</script>

document.write('<p>文章2</p>');

</script>

このようなHTMLがあって、ブラウザで表示させると
「文章2」
しか画面に出力されません。本来ならば「文章1」「文章2」の両方が出力されるはず。
NGサンプルページ

この現象はissueにもあがっていたようですが、報告数が少ないためか、closedになっています。
Issue #430: adsense script (document.write()) breaks jq mobile. · jquery/jquery-mobile

一番の回避策は「document.write()を使わない」ということなんですが、オトナの事情でそういうのが難しい場合。

document.write()を包んでいるコンテナに data-role=’page’ を付与してあげると回避できます。

<div data-role='page'>
    <p>文章1</p>

    <script type='text/javascript'>
        document.write('<p>文章2</p>');
    </script>
</div>

document.write('<p>文章2</p>');

</script>

</div>

data-role=’page’ の外にdocument.write()があるとアウトってことですね。
修正版サンプルページ

最近のスクリプトで document.write() を用いることは希ですが、古いスクリプトだと使われてたりします。

という現象が出たら参考にしてみてくださいな(・ω・)

2012年07月06日｜ Posted in Program ｜ No Comments »　

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。