Làm cách nào để hiển thị thông báo đang tải khi iFrame đang tải?

Tôi có một iframe tải trang web của bên thứ ba tải rất chậm.

Có cách nào để tôi có thể hiển thị thông báo đang tải trong khi iframe đó tải mà người dùng không thấy khoảng trống lớn không?

Tái bút. Lưu ý rằng iframe dành cho trang web của bên thứ ba nên tôi không thể sửa đổi / chèn bất kỳ thứ gì trên trang của họ.

Tôi đã thực hiện cách tiếp cận css sau:

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

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

Tôi nghĩ rằng mã này sẽ giúp:

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

Nếu đó chỉ là một trình giữ chỗ mà bạn đang cố gắng đạt được: một cách tiếp cận điên rồ là chèn văn bản làm nền svg. Nó cho phép một số tính linh hoạt và từ những gì tôi đã đọc, hỗ trợ trình duyệt sẽ khá tốt (mặc dù chưa thử nghiệm nó):

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

Bạn có thể thay đổi điều gì?

Bên trong giá trị nền:

• font size: tìm font-size = "" và thay đổi giá trị thành bất kỳ thứ gì bạn muốn

• màu chữ: tìm kiếm fill = "" . Đừng quên thay thế # bằng% 23 nếu bạn đang sử dụng ký hiệu màu thập lục phân. % 23 là viết tắt của mã hóa # trong URL cần thiết để chuỗi svg có thể được phân tích cú pháp trong FireFox.

• font family: tìm kiếm font-family = "", hãy nhớ thoát khỏi các dấu ngoặc kép nếu bạn có phông chữ bao gồm nhiều từ (như với \ 'Lucida Grande \')

• text: tìm kiếm giá trị phần tử của phần tử văn bản nơi bạn thấy chuỗi PLACEHOLDER . Bạn có thể thay thế chuỗi PLACEHOLDER bằng bất kỳ chuỗi nào tuân thủ url (các ký tự đặc biệt cần được chuyển đổi thành ký hiệu phần trăm)

Ví dụ trên fiddle

Ưu điểm:

• Không có phần tử HTML bổ sung
• Không có j
• Văn bản có thể dễ dàng (...) được điều chỉnh mà không cần chương trình bên ngoài
• Đó là SVG, vì vậy bạn có thể dễ dàng đặt bất kỳ SVG nào bạn muốn vào đó.

Nhược điểm:

• Hỗ trợ trình duyệt
• Nó phức tạp
• Nó hacky
• Nếu iframe-src không có bộ nền, trình giữ chỗ sẽ chiếu qua (điều này không có trong phương pháp này, mà chỉ là hành vi tiêu chuẩn khi bạn sử dụng bg trên iframe)

Tôi chỉ khuyên bạn nên làm điều này nếu nó thực sự cần thiết để hiển thị văn bản dưới dạng trình giữ chỗ trong iframe đòi hỏi một chút linh hoạt (nhiều ngôn ngữ, ...). Chỉ cần dành một chút thời gian và suy ngẫm về nó: tất cả những điều này có thực sự cần thiết không? Nếu được lựa chọn, tôi sẽ sử dụng phương pháp của @ 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>

Đây là một giải pháp nhanh chóng cho hầu hết các trường hợp:

CSS:

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

Bạn có thể sử dụng GIF tải động nếu bạn muốn,

HTML:

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

Sử dụng sự kiện tải lên, bạn có thể xóa hình ảnh đang tải sau khi trang nguồn được tải bên trong iframe của bạn.

Nếu bạn không sử dụng jQuery, chỉ cần đặt một id vào div và thay thế phần mã này:

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

bởi một cái gì đó như thế này:

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

Tất cả tốt nhất!

Có, bạn có thể sử dụng một div trong suốt được đặt trên vùng iframe, với gif của trình tải làm nền duy nhất.

Sau đó, bạn có thể đính kèm một onloadsự kiện vào iframe:

 $(document).ready(function() {

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

Tôi đã làm theo cách tiếp cận sau

Đầu tiên, thêm div anh chị em

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

và sau đó khi iframe hoàn tất tải

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

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

Bạn có thể sử dụng như bên dưới

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