javascript - Hur visar man ett laddningsmeddelande när en iFrame laddas?

Jag har en iframe som laddar en tredjepartswebbplats som är mycket långsam att ladda.

Finns det ett sätt jag kan visa ett laddningsmeddelande medan det iframen laddas så att användaren inte ser ett stort tomt utrymme?

PS. Observera att iframe:en är för en tredje parts webbplats, så jag kan inte ändra eller infoga något på deras sida.

Svar #1

Jag har gjort följande CSS-tillvägagångssätt:

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

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

Svar #2

Jag tror att den här koden kommer att hjälpa:

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

Svar #3

Om det bara är en platshållare du försöker uppnå: ett galet tillvägagångssätt är att injicera text som en svg-bakgrund. Det ger viss flexibilitet, och från vad jag har läst bör webbläsarstöd vara ganska bra (har inte testat det dock):

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

Vad kan du ändra?

Inuti bakgrundsvärdet:

  • teckenstorlek: leta efter font-size="" och ändra värdet till vad du vill

  • färg på typsnitt: leta efter fill="". Glöm inte att ersätta # med %23 om du använder hexadecimal färgnotation. %23 står för ett # i URL-kodning vilket är nödvändigt för att svg-strängen ska kunna tolkas i FireFox.

  • teckensnitts familj: leta efter font-family="" kom ihåg att undvika enkla citattecken om du har ett teckensnitt som består av flera ord (som med \'Lucida Grande\')

  • text: leta efter elementvärdet för textelementet där du ser PLACEHOLDER-strängen. Du kan ersätta PLACEHOLDER-strängen med vad som helst som är URL-kompatibelt (specialtecken måste konverteras till procentnotation)

Exempel på fiol

Fördelar :

  • Inga extra HTML-element
  • Ingen js
  • Text kan enkelt (...) justeras utan behov av ett externt program
  • Det är SVG, så du kan enkelt sätta in vilken SVG du vill där.

Nackdelar :

  • Webbläsarstöd
  • Det är komplext
  • Det är hackigt
  • Om iframe-src inte har en bakgrund inställd kommer platshållaren att lysa igenom (vilket inte är inneboende i denna metod, utan bara standardbeteende när du använder en bakgrund på iframe)

Jag skulle bara rekommendera detta om det är absolut nödvändigt att visa text som en platshållare i en iframe som kräver lite flexibilitet (flera språk, ...). Ta bara en stund och reflektera över det: är allt detta verkligen nödvändigt? Om jag hade ett val skulle jag välja @Christinas metod

Svar #4

En alternativ lösning.

<iframe srcdoc="Loading..." onload="this.removeAttribute('srcdoc')" src="https://example.com"></iframe>

Observera att srcdoc-attributet kan innehålla vilken HTML-markering som helst. Så du kan använda anpassade stilar på meddelandet.

<iframe id="example" src="https://example.com"></iframe>
<script>
  const iframe = document.getElementById('example');
  iframe.srcdoc = '<!DOCTYPE html><p style="color: green;">Loading...</p>';
  iframe.addEventListener('load', () => iframe.removeAttribute('srcdoc'));
</script>

Relaterade artiklar