HTML Zwei Webseiten in einem Tab durchwechseln lassen?!

SimonK91

Lieutenant
Registriert
März 2012
Beiträge
893
Hallo Forum,

Mein Ziel ist es auf einem Raspberry Pi zwei Webseiten im Vollbild abwechselnd (Wechsel nach X Sekunden) anzeigen lassen zu können. Es handelt sich dabei um extern generierte HTML Monitoring Seiten die an einem Arbeitsplatz über einen kleinen Monitor angezeigt werden, daher sollte der Wechsel der Seite möglichst "flackerfrei" erfolgen.

Ursprünglich habe ich die Umsetzung ganz oldschool mit einem iframe versucht, hierbei bleibt allerdings eine der beiden Seiten nur weiß anstatt im iframe dargestellt zu werden.

Da wir nur den Pi 1 benutzen der von der CPU Auslastung her schon schnell am Limit fährt, wollte ich eher eine schlanke HTML/JS Lösung und keine umständlichen Tab Rotate Tools im Browser selbst verwenden.

Wie gehe ich das am besten an? Hat da jemand einen Ansatz? Kenne mich leider im Bereich JS, Ajax nicht gut aus. Ich suche quasi irgendetwas was sich auf ein DIV oder so anwenden lässt.

Ich weiß dass es mit jquery möglich wäre, aber darin habe ich mich auch noch nicht eingelesen und das ganze scheint mir dafür etwas überdimensioniert zu sein?

Bin dankbar für jeden Tipp, dank im voraus!
 
klink mich hier mal ein zwecks info
hätte mir schon was überlegt bin aber kein programmierer

je nach browser: z.b. firefox addon reload every x minutes
und dann halt 2 fenster nebeneinander, untereinander wie auch immer

wird sicher auch für chrome geben

bei opera ging das mal per default ist aber schon jahre her das ich den genutzt habe


/edit: html
http://www.w3.org/TR/WCAG10-HTML-TECHS/#meta-element
 
Einen Tab Rotator will ich wie beschrieben eigentlich vermeiden. Die Meta Lösung hatte ich auch schon gefunden, aber hierzu müsste man ja die externen Webseiten bearbeiten, das ist ja nicht mögich (wird ja quasi nur eingebunden).
 
Du könntest einfach per jQuery mittels:

setTimeout(function(){$('#div_wo_seite_rein_soll').load("url_was_geladen_werden_soll");}, 1000);

eine Seite laden.
Die 1000 beziehen sich auf ms, also 1sek.
Umgebaut auf deinen Anwendungsfall wäre das:

<script>
seite = 1;
intervall = 10000;
setInterval(function(){

if (seite == 1) {
$('#div_wo_seite_rein_soll').load("url1_was_geladen_werden_soll");
seite = 2;
}
else {
$('#div_wo_seite_rein_soll').load("url2_was_geladen_werden_soll");
seite = 1; }, intervall);

</script>

Habs jetzt nicht getestet, sollte aber im groben funktionieren :D (man bedenke die Uhrzeit^^)
 
Zuletzt bearbeitet:
Danke für deinen Input.

Ich habe mich soweit in jquery nun eingelesen und eine Test-Seite erstellt. Einbinden einer externen .txt Datei zum Beispiel funktioniert, bei einer .html Quelle bleibt das div leer. Ebenso habe ich aktuell die Timeout geschichte erstmal weggelassen zum testen.

Habe nun ergoogelt: "jquery.load() function is not supported accessing cross-domain" was wohl der Grund dafür ist dass es nicht lädt. Man soll es so lösen: $("#div1").html('<object data="URL">').

Das funktioniert an sich mit diversen Testseiten auch gut, allerdings habe ich auch da das Problem dass die eingebundene Seite weiß ist, obwohl sie laden müsste. (Hatte das selbe Problem zu Anfang als ich es mit iframes testen wollte)
 
Zurück
Oben