iframe automatisch aktualisieren lassen

[Sempervivum]

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]

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]

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.

Wenn das funktioniert , wäre es super ! Gibt´s dazu irgendwo ein Beispiel-Demo ?

 

[miguel778]

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]

Könnte etwas so aussehen:

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

Könnte etwas so aussehen:

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

 

[Sempervivum]

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?

 

[miguel778]

der gesamte Kalender ist ein Frame

 

[Sempervivum]

Und wie lautet die URL der Seite, die im iFrame angezeigt wird? Gibt es da vielleicht schon einen URL-Parameter time?