WebKit で「戻る」後に iframe を動的に表示すると中身が…
上手く伝えられませんが、戻ってきた画面で iframe を動的に表示すると、iframe の中身が意図通りの URL をロードせず、ある URL のみをロードする様になってしまうという症状に遭遇しました。
Chrome (8.0.552.237) と Safari (5.0.3 (6533.19.4)) で遭遇し、Firefox (3.6.13) では遭遇していないため、おそらく WebKit の問題かと思われます(いずれも OSX 10.6.6)。
以下、再現手順とコード(HTML+JS)です。
- iframe を動的に表示するページを表示する(後述の HTML)
- iframe を動的に表示させる
- 別のページに遷移する
- 遷移後のページからブラウザの「戻る」で戻る
- iframe を動的に表示する
- iframe の中身が期待通りでない
<html> <head> <meta http-equiv="content-type" conten="text/html; charset=UTF-8" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('a.click').click(function(e){ e.preventDefault(); var screen = $('div#screen'); screen.html(''); var iframe = $('<iframe></iframe>'); iframe.attr('src', $(this).attr('href')); screen.append(iframe); // // location.href に代入して無理矢理意図通りの URL をロードさせる // if ($.browser.webkit) { // screen.find('iframe')[0].contentWindow.location.href = iframe.attr('src'); // } }); }); })(jQuery); </script> </head> <body> <ol> <li>「あ」「い」「う」のどれかを適当にクリックして iframe を表示させる。 <ul> <li><a href="http://www.google.co.jp/search?sourceid=chrome&ie=UTF-8&q=%E3%81%82" class="click">あ</a></li> <li><a href="http://www.google.co.jp/search?aq=f&sourceid=chrome&ie=UTF-8&q=%E3%81%84" class="click">い</a></li> <li><a href="http://www.google.co.jp/search?aq=f&sourceid=chrome&ie=UTF-8&q=%E3%81%86" class="click">う</a></li> </ul> </li> <li><a href="http://www.google.com/">適当なページに遷移してすぐにブラウザの「戻る」で戻ってくる</a></li> <li>「あ」「い」「う」それぞれ、iframe の中身が期待通りだろうか?遷移前、最後にクリックしたものに固定されていないだろうか? <ul> <li><a href="http://www.google.co.jp/search?sourceid=chrome&ie=UTF-8&q=%E3%81%82" class="click">あ</a></li> <li><a href="http://www.google.co.jp/search?aq=f&sourceid=chrome&ie=UTF-8&q=%E3%81%84" class="click">い</a></li> <li><a href="http://www.google.co.jp/search?aq=f&sourceid=chrome&ie=UTF-8&q=%E3%81%86" class="click">う</a></li> </ul> </li> <div id="screen"></div> </body> </html>
英語が苦手なため、何をキーワードにバグ情報を探したらよいかよくわかりません。なので、何が原因なのかは特定できていません。
取り急ぎの対策として、iframe の location.href に iframe の src 属性値を代入してごまかしてみたりしています(JS のコメントアウト部分を有効にする)。
単に自分が iframe の使い方を間違えている…とかでしょうか?
2011/01/18 17:40 追記
コメントで IE8 でも再現するという情報をいただきました。