0

ページに iFrame があります。ページの読み込み中は、iFrame も読み込まれるまでブラック ボックスとして表示されます。これは視覚的に邪魔です。ページの読み込み中にブラック ボックスが表示されないようにするにはどうすればよいですか?

iFrame コード + CSS:

<iframe class="iframe-email-signup" frameborder="0" src="/src.html"></iframe>

/* CSS for above Class */

.iframe-email-signup{
   max-height:7em;
   background: none !important;
}

問題が発生しているサイト: http://www.checkplusbalance.com/

オープニングサイトに表示される本文の下にあるメール登録ボックスです。

4

1 に答える 1

0

これが、ブラックボックスの問題を解決する方法です。CSS のみのソリューションが見つからなかったため、JS を使用して、iFrame が読み込まれた後にのみ iFrame を表示しました。

iFrame コード

<iframe id="iFrameID" frameborder="0" src="src.html"></iframe>

CSS

#iFrameID{
   display:none;
}

JS

$(function() {
   $("#iFrameID").on('load', function () {
       $("#iFrameID").fadeIn("fast");
   });
});

ノート：

ユーザーが JS を無効にしている場合、iFrame は表示されません。私の場合、iFrame のコンテンツは JS を有効にしないと機能しないので、これで問題ありません。

JS を使用して iFrame を非表示にする他の回避策があるため、ユーザーが JS を持っていない場合でも iFrame が表示されます。<noscript>複製した iFrame をタグでラップすることもできます。自分の状況に最も適した方法を選択しました。

于 2013-07-06T02:22:18.933 に答える