wie fix chrome flackert auf der iframe-Seite neu laden

Chrome flackert beim nachladen von Inhalten in iframes. Können diese vermieden werden, in irgendeiner Weise, zu denken:

  • Verpackung a-links mit js, das hat etwas Magisches.
  • Meta-tags im Inhalt-html. (Ich habe die Quelle Kontrolle über den html-Code in iframes)

Bitte beachten Sie, dass der content-type im iframe kann variieren (PDF, html, Bilder) so wenn ajax ist der einzige Weg hier heraus, spiegelt es die http-content-type zurück an den iframe?

Besuchen Sie bitte die demo auf http://jsfiddle.net/2tEVr/

Auszug aus der Geige:

 <iframe name="if" width="800" height="600"></iframe>

UPDATE

Die Lösung, die gearbeitet am besten für mich war, zu ersetzen, regelmäßige href ' s mit ajax-Anfragen, die sich vermehren-der Körper-Bereich (Lösung 4) das Flackern ist Weg, aber kommt zu einem Preis von akward Debuggen, da die Synchronisierung zwischen Inhalt und "view-source" ist, verloren auf ajax-Anfrage.

Auch, da der content-type-in meinem Fall können sich ändern, die Methode zum durchführen der ajax-request hatte auch etwas im Kopf haben und vielleicht fallen zurück zum regelmäßigen Standort Anfrage.

Grüße,

  • versuchen Sie, vor dem laden, so dass Ihr flimmern nicht showup
  • Aus deiner Frage nicht ganz klar ist, wie du (möchten Sie) den iframe. Tut Sie es erneut regelmäßig, oder einmal, wenn die gesamte Webseite lädt, oder einmal, wenn der Benutzer auf einen link klickt?
InformationsquelleAutor Teson | 2013-10-09
  1. 9

    @user247245: Aus Ihrer Frage nicht ganz klar ist, wie du (möchten Sie) den iframe. Tut Sie es erneut regelmäßig, oder einmal, wenn die gesamte Webseite lädt?

    Lösung 1: Unterschiedliche Hintergrundfarbe

    In Fall, dass Sie wollen einfach nur, um zu vermeiden, die hässliche weiße, und vermeiden Sie über-Komplikation. Stellen Sie eine andere hintergrund-Farbe im HTML-header framecontents.html Datei, etwa so:

    <!DOCTYPE html>
<html style="background-color: #F48;">

    Diese Weise, während die CSS - Datei wird geladen,analysiert und angewendet wird, der hintergrund ist nicht #fff.

    Lösung 2: Transparent iframe

    Zwar gibt es keinen Inhalt, der iframe soll halt nicht sichtbar sein. Lösung:

    <iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>

    Natürlich nicht mit diesem in Kombination mit Lösung 1, Sie Schießen sich in den Fuß.

    Lösung 3: Preload der iframe-Seite

    Fall, laden Sie den iframe später (wie Benutzer auf einen link klicken), sollten Sie das Vorausladen von deren Inhalt. Verstecken Sie diese in der Nähe der Spitze Ihrer (übergeordneten) Seite:

    <iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>

    Aber ich würde raten, mit Lösung 2 statt.

    Lösung 4: Wenn eine mobile web-interface:

    Sehen, wie jQuery-Mobile es getan hatte. Wir Bauten ein web-interface zu fühlen, wie eine native app, also ohne Neuladen blinkt. jQM behoben. Im Grunde funktioniert eine hintergrund ajax-Aufruf zum abrufen der vollständige HTML-Inhalt, extrahiert dann das body (die "Seite" div um genauer zu sein) und ersetzt dann den Inhalt (die mit einem übergang, wenn Sie möchten). Alle während eines reload spinner dargestellt.

    Alles in allem fühlt sich mehr wie eine mobile Anwendung: kein reload blinkt. Andere Lösungen wären:

    Lösung 5: Verwenden JS injizieren CSS:

    Sehen Antwort von jmva, oder http://css-tricks.com/prevent-white-flash-iframe/ .

    Lösung 6: verwenden Sie JS injizieren CSS (einfache version)

    <script type="text/javascript">
  parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html"  onload="this.style.visibility='visible';"></iframe>

    Könnte man natürlich weglassen, die <script> Teil und fügen Sie style="visibility:hidden;" auf den iframe, aber das würde sicherstellen, dass der Rahmen sichtbar ist für Besucher JS deaktiviert. Eigentlich würde ich raten, das zu tun, weil 99% der Besucher hat es trotzdem erlaubt, und sein einfacher und effektiver.

    InformationsquelleAutor Barry Staes
  2. 2

    Eine gemeinsame trick ist die Darstellung der iframe nur, wenn er voll geladen, aber es ist besser, sich nicht darauf verlassen, dass.

    <iframe src="..." style="visibility:hidden;" 
  onload="this.style.visibility='visible';"></iframe>

    Den gleichen trick ein bisschen optimiert mit JS.

    //Prevent variables from being global      
(function () {

/*
      1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
    ref = document.getElementsByTagName('base')[0] || 
          document.getElementsByTagName('script')[0];

div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

ref.parentNode.insertBefore(div, ref);


/*
    2. When window loads, remove that CSS, 
       making iframe visible again
*/
window.onload = function() {
    div.parentNode.removeChild(div);
}

})();

    Extrahiert aus css-trick

    Wenn Sie zum wechseln zwischen verschiedenen Websites und, dass trick von onload funktioniert nicht, die einzige praktikable Lösung wäre, zu zerstören, und erstellen Sie die iframe-Programm.

    InformationsquelleAutor jmventar
  3. 1

    Versuchen Sie transform: translate3d(0, 0, 0); auf ein übergeordnetes element.

    Hatte ich ein Problem, wo der iframe war größer als die übergeordnete (parent hat overflow: hidden). Der iframe ist Teil überflogen flackerte auf jedes video-Schleife auf Chrome (YouTube iframe-API).

    Zwingt die hardware-Beschleunigung war dieser Weg die einzige Sache, die für mich gearbeitet.

    • Danke, habe versucht, sowohl auf iframe und dem übergeordneten div. Kein Glück.. os: windows
    • Ich habe gekämpft, mit diesem zu und fanden keine brauchbare Lösung. Ich will nicht unnötig zu verkomplizieren mein code, nur weil der Chrome. Es funktioniert perfekt in FireFox und auch Edge, so würde ich sagen Chrome ist das problem. Es funktioniert aber sieht schlecht aus. Die Entwickler von Chrome, kann und sollte das problem lösen, FireFox und Edge haben bereits.
    InformationsquelleAutor gedijedi
Schreibe einen Kommentar