iFrameの読み込み中に読み込みメッセージを表示する方法は？

107

読み込みが非常に遅いサードパーティのWebサイトを読み込むiframeがあります。

iframeの読み込み中にユーザーに大きな空白スペースが表示されない間に読み込みメッセージを表示する方法はありますか？

PS。iframeはサードパーティのWebサイト用であるため、ページの内容を変更または挿入することはできません。

javascript jquery iframe

— ジェイコブ
ソース

ええ、私はiframeの進行状況コールバックについては知りません...うーん。

— Jeffrey Sweeney

231

私は次のcssアプローチを行いました：

<div class="holds-the-iframe"><iframe here></iframe></div>

.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}

— クリスティーナ
ソース

1

これは私の場合に最適でした。タブがクリックされているときにのみiFrameをロードしていたため、選択した答えが機能しませんでした。しかし、これはiFrameソースのロード中にエレガントに表示されました。しかし、ジェイコブがjQueryソリューションを求めたため、これが回答として選択されなかったのは

— 残念

21

ロードするiframeの背景が透明な場合、これはうまく機能しません。iframeが読み込まれると、読み込み中のgifが引き続き表示されます。

— Westy92、2015年

3

@ChristnaこのトリックはIE-11では機能しません。ハックはありますか？

— mmuzahid 2017

3

iframe onload関数を使用すると、CSSの背景画像を削除できます。

— Hugo Cox

1

すばらしい答えです。できます。ローダーが見やすくなるように、高さを追加することもお勧めします。

— Raz

33

このコードが役立つと思います：

JS：

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

HTML：

<iframe src="http://google.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>

CSS：

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ccc;
    top: 0px;
    left: 0px;
    position: absolute;
}

— ミンコ・ゲチェフ
ソース

なぜあなたは火の#loadingMessage時にあなたが隠すのか理解しますloadが、なぜあなたもそれを隠すのreadyですか？早すぎませんか？

— teedyay

1

それはユーザーのニーズに依存します。ロードメッセージを非表示にする前にすべてのイメージをロードする必要がない場合は、on loadコールバックは必要ありません。

— Minko Gechev

9

jqueryは「JS」ではありません。

— OZ_ 2015年

5

@OZ_ + sプロパティaddEventListenerを使用してquerySelector+ 上記のコードをバニラJavaScriptに変換することは難しくありませんstyle:-)。それに加えて、質問の著者がタグ付けしているのはjqueryです。なぜあなたのメッセージだったのですか？:-)

— Minko Gechev 2015年

17

それがあなたが達成しようとしているプレースホルダーだけの場合：クレイジーなアプローチは、svg-backgroundとしてテキストを挿入することです。それはある程度の柔軟性を可能にします、そして私が読んだことからブラウザサポートはかなりまともです（しかしそれをテストしていません）：

クロム> = 27
FireFox> = 30
Internet Explorer> = 9
Safari> = 5.1

html：

<iframe class="iframe-placeholder" src=""></iframe>

css：

.iframe-placeholder
{
   background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat;
}

何を変えることができますか？

background-value内：

フォントサイズ：font-size = ""を探し、値を任意の値に変更します
フォントの色：fill = ""を探します。16進数のカラー表記を使用している場合は、＃を％23に置き換えることを忘れないでください。％23は、svg-stringをFireFoxで解析できるようにするために必要なURLエンコードの＃を表します。
フォントファミリー：font-family = ""を探します。複数の単語で構成されるフォント（\ 'Lucida Grande \'など）がある場合は、一重引用符をエスケープしてください。
text：PLACEHOLDER stringがあるtext-elementの要素値を探します。PLACEHOLDER文字列は、URLに準拠したものに置き換えることができます（特殊文字はパーセント表記に変換する必要があります）

フィドルの例

長所：

追加のHTML要素はありません
jsなし
外部プログラムを必要とせずに、テキストを簡単に（...）調整できます
これはSVGなので、必要なSVGを簡単に配置できます。

短所：

ブラウザのサポート
複雑です
それはハッキーです
iframe-srcに背景が設定されていない場合、プレースホルダーは輝きます（これはこのメソッドに固有ではなく、iframeでbgを使用するときの標準的な動作です）

私がこれを推奨するのは、少し柔軟性を必要とするiframe内のプレースホルダーとしてテキストを表示することが絶対に必要な場合のみです（複数の言語など）。少し時間を割いて考えてみてください。これらすべてが本当に必要ですか？選択肢があれば、@ Christinaの方法を採用します

— 電卓
ソース

5

$('iframe').load(function(){
      $(".loading").remove();
    alert("iframe is done loading")
}).show();


<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/>
<div class="loading" style="width:600px;height:300px;">iframe loading</div>

— ソルト・ハレケット
ソース

ページにjQueryがない可能性があるため、サードパーティのウェブサイトに読み込まれているiframeの場合、これは必ずしも良いソリューションではありません。

— ルーク

4

ほとんどの場合の簡単な解決策を次に示します。

CSS：

.iframe-loading { 
    background:url(/img/loading.gif) center center no-repeat; 
}

必要に応じて、アニメーションのロードGIFを使用できます。

HTML：

<div class="iframe-loading">
    <iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

onloadイベントを使用すると、ソースページがiframe内に読み込まれた後に、読み込み中の画像を削除できます。

jQueryを使用していない場合は、idをdivに入れて、コードのこの部分を置き換えます。

$('.iframe-loading').css('background-image', 'none');

このようなもので：

document.getElementById("myDivName").style.backgroundImage = "none";

ではごきげんよう！

— デビッドトレド
ソース

2

はい、ローダーgifを背景として、iframe領域上に配置された透明なdivを使用できます。

次に、onloadイベントをiframeに添付できます。

 $(document).ready(function() {

   $("iframe#id").load(function() {
      $("#loader-id").hide();
   });
});

— maxijb
ソース

1

私は次のアプローチに従いました

まず、兄弟divを追加します

$('<div class="loading"></div>').insertBefore("#Iframe");

そしてiframeがロードを完了したとき

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });

— ガウラヴ
ソース

0

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=test@user8.com&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>

— ロミ
ソース

-1

以下のように使用できます

$('#showFrame').on("load", function () {
        loader.hide();
});

— ラメシュ・ナラヤン
ソース