Как отобразить сообщение о загрузке, когда в iframe загружается?

Я думаю, что это поможет:http://jsfiddle.net/UVsdh/

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;
}

Если это только заполнитель, который вы пытаетесь достичь: сумасшедший подход заключается в том, чтобы вводить текст в качестве svg-фона. Это позволяет обеспечить некоторую гибкость, и из того, что я прочитал, поддержка браузера должна быть довольно приличной (хотя и не проверяла ее):

• Chrome > = 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;
}

что вы можете перемены?

внутри фона-значение:

• размер шрифта: искать font-size="" и измените значение на все, что вы хотите

• цвет шрифта: искать fill="". Не забудьте заменить # на %23, если вы используете шестнадцатеричную цветовую нотацию. %23 означает кодировку # в URL, которая необходима для того, чтобы svg-строка могла быть проанализирована в FireFox.

• семейство шрифтов : ищите font-family="" не забудьте избежать одинарных кавычек, если у вас есть шрифт, который состоит из нескольких слов (например, с \'Lucida Grande\')

• текст: найдите значение элемента text-элемента, где вы видите строка-заполнитель. Вы можете заменить строку-заполнитель на все, что соответствует url-адресу (специальные символы должны быть преобразованы в процентную нотацию)

пример: http://jsfiddle.net/8t56Ljw0/

плюсы:

• никаких дополнительных HTML-элементов
• нет js
• текст легко (...) быть скорректированы без необходимости внешней программы
• это SVG, так что вы можете легко поставить любой SVG вы хотите там.

плюсы:

• поддержка браузеров
• сложно
• это вымышленная
• если iframe-src не имеет фона установите, заполнитель будет просвечивать (что не присуще этому методу, но просто стандартное поведение при использовании bg на iframe)

Я бы рекомендовал это только в том случае, если абсолютно необходимо показать текст в качестве заполнителя в iframe, который требует немного гибкости (несколько языков,...). Просто найдите минутку и поразмышляйте над этим: неужели все это действительно надо? Если бы у меня был выбор, я бы пошел на метод @Christina

$('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>

вот быстрое решение для большинства случаев:

CSS:

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

вы можете использовать анимированный загрузчик, если хотите,

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, просто поместите идентификатор в div и замените эту часть кода:

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

что-то вроде это:

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

всего наилучшего!

Да, вы можете использовать прозрачный div, расположенный над областью iframe, с загрузчиком в качестве только фона.

затем вы можете прикрепить событие onload в теге iframe...

 $(document).ready(function() {

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

удачи

<!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>