jQuery Mobileで妙なハマり方をしました。というわけで、メモ。
※以降、jqmと書きます。
現象
とあるスクリプトとjqmの両方を読み込ませると、画面が真っ白になる。
スクリプトの中では”document.write() ”が使われています。
どうやらwriteした中身を「ページ」として生成してしまう様子。
<p>文章1</p>
<script type=’text/javascript’>
document.write(‘<p>文章2</p>’);
</script>
[/html]
このような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>
[/html]
data-role=’page’ の外にdocument.write()があるとアウトってことですね。
修正版サンプルページ
最近のスクリプトで document.write() を用いることは希ですが、古いスクリプトだと使われてたりします。
- 諸事情でこういったスクリプトとjqmを併用しないといけない
- 画面が真っ白になっちゃった
という現象が出たら参考にしてみてくださいな(・ω・)