iframe automatisch aktualisieren lassen

Sempervivum

Erfahrenes Mitglied
Eine Möglichkeit wäre, zwei iFrames zu verwenden und den, der gerade neu geladen wird, zu verbergen. Dann auf das onload-Event horchen und, wenn das Laden fertig ist, den neuen sichtbar machen und den alten verbergen.
 

basti1012

Erfahrenes Mitglied
Du schreibst das der iframe alle 3 Sekunden neu geladen wird.
Wo wird der den neu geladen ? Auf der Seite wo der <iframe src=""></iframe> Code steht, oder bei der Seite die da eingebunden wird.?.

Wichtig ist es ja vieleicht auch zu wissen ob der Inhalt Fremd ist oder von deiner eigener Seite , weil bei der eigene Seite hat man mehrere möglichkeiten , bzw auch andere möglichkeiten
 

miguel778

Grünschnabel
Du schreibst das der iframe alle 3 Sekunden neu geladen wird.
Wo wird der den neu geladen ? Auf der Seite wo der <iframe src=""></iframe> Code steht, oder bei der Seite die da eingebunden wird.?.


Wichtig ist es ja vieleicht auch zu wissen ob der Inhalt Fremd ist oder von deiner eigener Seite , weil bei der eigene Seite hat man mehrere möglichkeiten , bzw auch andere möglichkeiten


In Raum#1 steht ein Display wo die Änderungen vorgenommen werden - in Raum#2 ein Display wo lediglich die Anzeige jedesmal aktualisiert werden soll, d.h. am Display Raum#2 ist die Seite mit dem iframe.


Ja, es handelt sich tatsächlich um eigene Seite.
 

Sempervivum

Erfahrenes Mitglied
Könnte etwas so aussehen:
Code:
    <style>
        iframe.noflicker:not(.active) {
            display: none
        }
    </style>
    <iframe class="noflicker active" src="https:domain.de?time=0"></iframe>
    <iframe class="noflicker" src="https:domain.de?time=0"></iframe>
    <script>
        var iframes = document.querySelectorAll('iframe.noflicker');
        for (var i = 0; i < iframes.length; i++) {
            iframes[i].classList.add('firstload');
            iframes[i].addEventListener('load', function () {
                if (this.classList.contains('firstload')) {
                    this.classList.remove('firstload');
                } else {
                    var active = document.querySelector('iframe.noflicker.active');
                    var notactive = document.querySelector('iframe.noflicker:not(.active)');
                    active.classList.remove('active');
                    notactive.classList.add('active');
                }
            });
        }
        setInterval(function () {
            var newURL = document.querySelector('iframe.noflicker.active').src
                .replace(/\?time=[\d]+$/, '?time=' + Date.now());
            document.querySelector('iframe.noflicker:not(.active)').src = newURL;
        }, 3000);
    </script>
 

miguel778

Grünschnabel
Könnte etwas so aussehen:
Code:
    <style>
        iframe.noflicker:not(.active) {
            display: none
        }
    </style>
    <iframe class="noflicker active" src="https:domain.de?time=0"></iframe>
    <iframe class="noflicker" src="https:domain.de?time=0"></iframe>
    <script>
        var iframes = document.querySelectorAll('iframe.noflicker');
        for (var i = 0; i < iframes.length; i++) {
            iframes[i].classList.add('firstload');
            iframes[i].addEventListener('load', function () {
                if (this.classList.contains('firstload')) {
                    this.classList.remove('firstload');
                } else {
                    var active = document.querySelector('iframe.noflicker.active');
                    var notactive = document.querySelector('iframe.noflicker:not(.active)');
                    active.classList.remove('active');
                    notactive.classList.add('active');
                }
            });
        }
        setInterval(function () {
            var newURL = document.querySelector('iframe.noflicker.active').src
                .replace(/\?time=[\d]+$/, '?time=' + Date.now());
            document.querySelector('iframe.noflicker:not(.active)').src = newURL;
        }, 3000);
    </script>

Schon mal grossen Dank dafür !

Ich habe den Code getestet doch entweder mach ich etwas falsch oder ... das Flackern ist noch immer da und irgendwie werden die Inhalte verschoben, nach dem refresh (siehe Anhang)
 

Anhänge

  • screenshot.jpg
    screenshot.jpg
    185,8 KB · Aufrufe: 3

Sempervivum

Erfahrenes Mitglied
Ist das mattblaue und das pinke jeweils ein iFrame? Mein Code funktioniert so zunächst mal nicht für mehrere iFrames. Wenn man es für mehrere iFrames erweitern will, müsste um ein Päärchen jeweils ein Container sein. Oder ist der ganze Kalender ein iFrame?