16

iframeJavascriptを使用して読み込まれるを含むページがあります。

index.html

<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>

<script type="text/javascript">
function someFunction() {
  var myFrame = document.getElementById('myFrame');
  var loader = document.getElementById('loader');

  loader.style.display = 'block';

  myFrame.src = 'myFrame.html';
  myFrame.onload = function() {
    myFrame.style.display = 'block';
    loader.style.display = 'none';
  };
}
</script>

に読み込まれるページにはiframe、JS駆動のスクロールバー（jScrollPane + jQueryディメンション）を追加する目的で特定の要素のサイズを計算するJavascriptロジックが含まれています。

myFrame.html

<div id="scrollingElement" style="overflow: auto;">
  <div id="several"></div>
  <div id="child"></div>
  <div id="elements"></div>
</div>

<script type="text/javascript">
$(document).load(function() {
  $('#scrollingElement').jScrollPane();
});
</script>

これはChrome（およびおそらく他のWebkitブラウザー）では機能しますが、FirefoxとIEでは失敗します。これは、jScrollPane呼び出された時点ですべての要素がまだ見えず、jQueryディメンションが要素のディメンションを判別できないためです。

呼び出される前にiframe自分が表示されていることを確認する方法はありますか？遅延に使用する以外は、絶対に避けたいものです。 $(document).ready(...)setTimeoutjScrollPane

4

4 に答える 4

14

一部のブラウザは、「display：none」が置き換えられた要素（Flashやiframeなど）に適用されると、その要素の視覚情報は不要になると想定しています。したがって、要素が後でCSSによって表示される場合、ブラウザは実際にビジュアルデータフォームを最初から再作成します。

iframeのデフォルトが「display：none;」になっていると思います。ブラウザにHTMLのレンダリングをスキップさせ、タグに寸法がないようにします。「display：none;」を使用するのではなく、可視性を「非表示」に設定するか、ページの外に配置します。

幸運を。

于 2010-05-07T05:37:25.453 に答える
8

を使用してiframeを非表示にする代わりに、次のdisplay:noneことを試みることができます...

... セットするvisibility:hidden

... セットするposition:absolute; top:-600px;

... セットするopacity:0

または、jQueryがオブジェクトを「認識」するが、ユーザーは「認識」しないようにする（そして、関数で使用されているcss属性をリセットする）他の何かmyFrame.onload。

于 2010-04-28T14:38:44.437 に答える
0

visibility:collapse; display:hidden; height:0px;

空白を取り除くためにも機能します..iframeもロードされます..

于 2013-11-26T17:49:48.100 に答える
-4

非表示のiframeはセキュリティ上の大きな問題です。おそらく、それが合法である場合は、あなたが望むことを達成するための別の方法を見つけることを試みるのが最善です。なぜなら、将来のブラウザがこの機能を完全に取り除くことを願っています。http://blog.opendns.com/2012/07/10/opendns-security-team-blackhole-exploit/

于 2012-09-26T14:58:38.653 に答える