Program

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

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

現象

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

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

このような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’ を付与してあげると回避できます。

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

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

• 諸事情でこういったスクリプトとjqmを併用しないといけない
• 画面が真っ白になっちゃった

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

関連記事