จะแสดงข้อความกำลังโหลดเมื่อ iFrame กำลังโหลดได้อย่างไร?

ฉันมี iframe ที่โหลดเว็บไซต์ของบุคคลที่สามซึ่งโหลดช้ามาก

มีวิธีใดบ้างที่ฉันสามารถแสดงข้อความการโหลดในขณะที่ iframe โหลดโดยที่ผู้ใช้ไม่เห็นพื้นที่ว่างขนาดใหญ่

ปล. โปรดทราบว่า iframe มีไว้สำหรับเว็บไซต์ของบุคคลที่สามดังนั้นฉันจึงไม่สามารถแก้ไข / ฉีดอะไรในหน้าของพวกเขาได้

ฉันได้ทำตามแนวทาง css ต่อไปนี้:

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

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

ฉันคิดว่ารหัสนี้จะช่วยได้:

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

คุณสามารถเปลี่ยนแปลงอะไรได้บ้าง?

ภายใน background-value:

• ขนาดตัวอักษร: มองหาfont-size = ""และเปลี่ยนค่าเป็นอะไรก็ได้ที่คุณต้องการ

• สีตัวอักษร: มองหาเติม = "" อย่าลืมแทนที่ # ด้วย% 23 หากคุณใช้สัญกรณ์สีฐานสิบหก % 23 ย่อมาจาก # ในการเข้ารหัส URL ซึ่งจำเป็นสำหรับสตริง svg เพื่อให้สามารถแยกวิเคราะห์ใน FireFox ได้

• ตระกูลแบบอักษร: มองหาfont-family = ""อย่าลืมหลีกเลี่ยงเครื่องหมายคำพูดเดียวหากคุณมีแบบอักษรที่ประกอบด้วยคำหลายคำ (เช่น \ 'Lucida Grande \')

• ข้อความ: มองหาค่าองค์ประกอบของข้อความองค์ประกอบที่คุณเห็นสตริง PLACEHOLDER คุณสามารถแทนที่สตริง PLACEHOLDER ด้วยอะไรก็ได้ที่สอดคล้องกับ URL (อักขระพิเศษต้องถูกแปลงเป็นรูปแบบเปอร์เซ็นต์)

ตัวอย่างซอ

ข้อดี:

• ไม่มีองค์ประกอบ 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; 
}

คุณสามารถใช้ 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";

ดีที่สุด!

ได้คุณสามารถใช้ div โปร่งใสที่วางตำแหน่งเหนือพื้นที่ iframe โดยมี gif loader เป็นพื้นหลังเท่านั้น

จากนั้นคุณสามารถแนบonloadเหตุการณ์ไปยัง iframe:

 $(document).ready(function() {

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

ฉันได้ปฏิบัติตามแนวทางต่อไปนี้

ขั้นแรกให้เพิ่ม div พี่น้อง

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

จากนั้นเมื่อ iframe โหลดเสร็จ

$("#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>

คุณสามารถใช้ดังต่อไปนี้

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