9

iframe でコンテンツをリロードすると、Chrome がちらつきます。次のことを考えて、これを何らかの方法で回避できますか。

  • いくつかの魔法を行う js で a-links をラップします。
  • content-html のメタタグ。(iframe 内の html をソース管理しています)

iframe の content-type は (pdf、html、images) によって異なる場合があることに注意してください。ここで ajax が唯一の方法である場合、http-content-type は iframe に反映されますか?

http://jsfiddle.net/2tEVr/のデモにアクセスしてください。

フィドルの抜粋:

 <iframe name="if" width="800" height="600"></iframe>

アップデート

私にとって最も効果的な解決策は、通常の href を ajax-requests に置き換えて、本文領域を再作成することでした (以下の解決策 4)。ちらつきはなくなりましたが、コンテンツと「ビューソース」の間の同期がajax-request で失われました。

また、私の場合は content-type が変更される可能性があるため、ajax-request を実行する方法にはいくつかの頭脳が必要であり、おそらく通常の位置情報リクエストにフォールバックする必要がありました。

よろしく、

4

3 に答える 3

2

よくあるトリックは、完全にロードされたときに iframe を表示することですが、それに頼らない方がよいでしょう。

<iframe src="..." style="visibility:hidden;" 
  onload="this.style.visibility='visible';"></iframe>

JS を使用して少し最適化された同じトリック。

// Prevent variables from being global      
(function () {

/*
      1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
    ref = document.getElementsByTagName('base')[0] || 
          document.getElementsByTagName('script')[0];

div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

ref.parentNode.insertBefore(div, ref);


/*
    2. When window loads, remove that CSS, 
       making iframe visible again
*/
window.onload = function() {
    div.parentNode.removeChild(div);
}

})();

css-trickから抜粋

異なるサイトを切り替える必要があり、オンロードのトリックが機能しない場合、実行可能な唯一の解決策は、iframe を破棄してプログラムで作成することです。

于 2014-02-24T12:52:04.010 に答える