Hatena::ブログ(Diary)

こしごぇ

2011年01月17日

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)です。

  1. iframe を動的に表示するページを表示する(後述の HTML)
  2. iframe を動的に表示させる
  3. 別のページに遷移する
  4. 遷移後のページからブラウザの「戻る」で戻る
  5. iframe を動的に表示する
  6. 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 でも再現するという情報をいただきました。

cyokodogcyokodog 2011/01/18 16:09 会社のIE8で試したら再現しました。
古いiframeの削除をremove()メソッドで行い且つ、iframeの書き出しの際、他の要素を含めるとちゃんと挙動しました。
下記例ではspanをつけてます
$('a.click').click(function(e){
e.preventDefault();
$('div#screen')
.find('iframe').remove().end()
.append('<iframe src="'+$(this).attr('href')+'"></iframe><span/>')
;
});
ちなみに削除の際、spanも削除するとだめでした

http://d.hatena.ne.jp/cyokodog-memo/20110118/1295334221

koshigoebkoshigoeb 2011/01/18 16:27 なるほど。
参考にさせていただきます。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証