Program
jQuery Mobile + document.write() で真っ白け
jQuery Mobileで妙なハマり方をしました。というわけで、メモ。
※以降、jqmと書きます。
現象
とあるスクリプトとjqmの両方を読み込ませると、画面が真っ白になる。
スクリプトの中では”document.write() ”が使われています。
どうやらwriteした中身を「ページ」として生成してしまう様子。
1 2 3 4 5 |
<p>文章1</p> <script type='text/javascript'> 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’ を付与してあげると回避できます。
1 2 3 4 5 6 7 |
<div data-role='page'> <p>文章1</p> <script type='text/javascript'> document.write('<p>文章2</p>'); </script> </div> |
data-role=’page’ の外にdocument.write()があるとアウトってことですね。
修正版サンプルページ
最近のスクリプトで document.write() を用いることは希ですが、古いスクリプトだと使われてたりします。
- 諸事情でこういったスクリプトとjqmを併用しないといけない
- 画面が真っ白になっちゃった
という現象が出たら参考にしてみてくださいな(・ω・)
関連記事
2012年07月06日 | Posted in Program | No Comments »
コメントを残す