Script etc. zum zyklischen Anzeigen für Websites in Firefox?

Anhang 33328

wirklich super, absolut perfekt! ein ganz herzliches Dankeschön!

Anhang 33328

- - - Aktualisiert - - -

kurze Ergänzung:

der Kurs-Chart wird immer nur beim 1. Link angezeigt, beim Rest fehlt er immer - dann ist er in der neuen Runde beim 1. Link wieder da.
Hat jetzt aber keine Eile, der aktuelle Kurs ist immerhin immer da!

- - - Aktualisiert - - -

stimmt auch nicht immer, jetzt geht es zeitweise. Scheint was mit den eingebetteten Java-Werbeapplets zu tun zu haben, ob es funzt oder nicht.

- - - Aktualisiert - - -

FAZIT:

alles super, wie es jetzt läuft, vielen, vielen Dank noch mal! Anhang 33328

wie gesagt, die eingebetten Seiten stressen irgendwie rum weil schlecht gecoded (Firefox Debugger meldet viele Fehler in den Webseiten), wenn ich eine Lösung finde wie ich die Webseiten Einkapseln kann ohne ihre Funktion einzuschränken, werf ich hier im Topic einfach was hinterher :D

und manchmal kommen die besten Ideen wenn man darüber schreibt ... ich versuch mal ne Version mit FRAME oder IFRAME ... mal sehen ob die sich besser verhalten :D

---------

Ich habe mal NOCH eine Version gebaut, die in den jeweiligen DIVs das Schlüsselwort SANDBOX benutzt, damit sollten die divs sich stabiler verhalten

Code:

 <html lang="en"> <head> <meta charset="utf-8" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script> <script type="text/javascript"> $(document).ready(function () { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 2000; //interval between items (in milliseconds) var itemInterval = 5000; //cross-fade time (in milliseconds) var fadeTime = 2000; //count number of items var numberOfItems = $('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); //loop through the items var infiniteLoop = setInterval(function() { $('.rotating-item').eq(currentItem).fadeOut(fadeTime); if(currentItem == numberOfItems -1) { currentItem = 0; } else { currentItem++; } $('.rotating-item').eq(currentItem).fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); }); </script> <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title> </head> <body> <div id="rotating-item-wrapper"> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid green 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/index/DAX-Index-20735" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid red 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/index/Dow-Jones-Index-324977" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid orange 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/aktien/Alibab...e-US01609W1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/aktien/Facebo...e-US30303M1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> </div> </body>

wie es momentan aussieht, werden allerdings die Seiten nicht bei jedem Anzeigen auch wirklich aktuell neu geladen, so sind alle Seiten momentan nach 2 Stunden Laufzeit seit 14:30 auch 2 Stunden alt, d.h. um 16:30 mit den Werten von 14:30.

- - - Aktualisiert - - -

edit:

Ergänzung:
ich hatte noch die alte Version getestet, und nicht gesehen, dass du inzwischen eine neuere eingestellt hast.
Ich beobachte jetzt mit der neuen Version weiter... ;)

Code:

 <html lang="en"> <head> <meta charset="utf-8" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script> <script type="text/javascript"> $(document).ready(function () { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 2000; //interval between items (in milliseconds) var itemInterval = 20000; //cross-fade time (in milliseconds) var fadeTime = 2000; //count number of items var numberOfItems = $('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); //loop through the items var infiniteLoop = setInterval(function() { $('.rotating-item').eq(currentItem).fadeOut(fadeTime); if(currentItem == numberOfItems -1) { currentItem = 0; } else { currentItem++; } $('.rotating-item').eq(currentItem).fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); }); </script> <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title> </head> <body> <div id="rotating-item-wrapper"> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid green 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/index/DAX-Index-20735" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid red 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/etf/DEKA-MDAX-UCITS-ETF-ETF-DE000ETFL441" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/index/Dow-Jones-Index-324977" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid orange 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/aktien/Alibaba-Aktie-US01609W1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/aktien/Facebook-Aktie-US30303M1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;" sandbox> <object type="text/html" data="https://www.onvista.de/aktien/TENCENT-HOLDINGS-LTD-Aktie-KYG875721634" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object> </div> </div> </body>

- - - Aktualisiert - - -

aktualisiert:

ja, es scheint so zu bleiben:

es gibt Seiten, die sich von sich aus aktualisieren, per Ticker: hier wird die Anzeige immer aktualisiert.

Die Seiten aber, die das nicht tun, bleiben auf dem alten Stand stehen und zeigen immer die alten Werte (z.B. Alibaba, Facebook).
Werden sie hingegen manuell geladen und danach immer wieder neu manuell neu geladen (F5 oder reload-Symbol), dann sind sie aktualisiert, wie erwartet:

das InfiniteRotatingImages-Programm müsste es aber auch so machen als würde man manuell neu laden.

(augenblicklich kann man es nur auf den US Handelsplätzen verfolgen, da die deutschen (Frankfurt, Xetra) ja geschlossen sind.
Alibaba und Facebook z.B. werden dabei automatisch auf Nasdaq (d.h. von D nach USA) umgeswitcht.)

Vermutlich wird der DAX und der MDAX per Ticker selbst-aktualisierend sein, während Einzelaktien an deutschen Börsen nur per Neu-Laden aktualisert werden können: das fehlt im Augenblick also bisher.

ja, die neuladefunktion hatte ich nicht eingebaut, hab ich irgendwie vergessen, ich schau mal was cih machen kann

aber ich werd das so einbauen dass du steuern kannst welche seiten sich aktualsieren sollen, weil die mit dynamischer aktualisierung würden sonst ständig neu laden und die verbindungen neu laden, was den browser unnötig bremst

ok, danke, steuern können ist an sich ja immer gut ;) , aber weil die Seiten ja nur ca. 10-15 sec. angezeigt werden, wäre "immer aktualisieren" eigentlich absolut perfekt, gerade weil zwischendurch auch oft Ladefehler passieren!

Finale Fassung!!!!

ich habe die links in ein array gepackt und nur minimales feedback eingebaut, wenn man zu wenig einträge ind er liste hat doer wenn der script das wrapper div nicht finden kann!
außerdem habe ich den code mal kommentiert zum verständnis und in dem array kann man auch sagen ob die seite NACH DEM FADEOUT neu geladen werden soll oder nicht (soll bedeuten die pages laden gleich NACH dem ausblenden neu, sind also nicht top aktuell, dafür müsste ich mir nochmal einen in der logik abbrechen um quasi das übernächste object zu reloaden während das aktuelle angezeigt wird doer so)

Code:

 <html lang="en"> <head> <meta charset="utf-8" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script> <script type="text/javascript"> //define list for all websites to cycle var URIList = [ {"data": "https://www.onvista.de/index/DAX-Index-20735", reload: false}, {"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: false}, {"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: false}, {"data": "https://www.onvista.de/aktien/Alibab...e-US01609W1027", reload: false}, {"data": "https://www.onvista.de/aktien/Facebo...e-US30303M1027", reload: false}, {"data": "http://www.zeitzonen.de/deutschland.html", reload: true} ]; //creates an object JQUERY node with the defined website that can be attached anywhere function createContent(data) { var newcontent = document.createElement("object"); newcontent.style.position = "fixed"; newcontent.style.top = 0; newcontent.style.left = 0; newcontent.style.minWidth = "100%"; newcontent.style.minHeight = "100%"; newcontent.id = "content-object"; newcontent.type = "text/html"; newcontent.data = data; return $(newcontent); } $(document).ready(function () { //create our rotating-items var divs = []; var containers = $("#rotating-item-list"); if(containers.length == 0) { alert("NO \"rotating-item-list\" CONTAINER FOUND!") } else if(containers.length > 1) { alert("ONLY 1 \"rotating-item-list\" CONTAINER ALLOWED!") } else { var divcontainer = containers.get(0); URIList.forEach(function(element){ //create a div that can be faded and uses all displayspace available while overlapping with identical divs var newdiv = document.createElement("div"); newdiv.style.position = "fixed"; newdiv.style.top = 0; newdiv.style.left= 0; if(divs.length > 0) { newdiv.style.display = "none"; } else { newdiv.style.display = "block"; } newdiv.style.minHeight = "100%"; newdiv.style.minHidth = "100%"; newdiv.class = "rotating-item"; newdiv.sandbox = ""; //create an object which loads and displays the page of interest var newcontent = createContent(element.data); //convert DOM to JQUERY newdiv = $(newdiv); //insert content in div newdiv.append(newcontent); //insert div in container divcontainer.append(newdiv.get(0)); divs.push(newdiv); }); if(divs.length < 2) { alert("TO FEW ENTRYS TO CYCLE"); } else { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 1000; //interval between items (in milliseconds) var itemInterval = 3000; //cross-fade time (in milliseconds) var fadeTime = 1000; //count number of items var numberOfItems = divs.length;//$('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); var lastItem = -1; //loop through the items var infiniteLoop = setInterval(function () { //fade out and when finished reload page divs[currentItem].fadeOut(fadeTime, function (){ if(URIList[lastItem].reload == true) { var fadednode = $(this); //grab JQUERY fadednode.empty(this.firstChild); //clear content var newcontent = createContent(URIList[lastItem].data); //create new content fadednode.append(newcontent); //append new content } }); lastItem = currentItem; if(currentItem == numberOfItems -1) { currentItem = 0; } else { currentItem++; } divs[currentItem].fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); } } }); </script> <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title> </head> <body> <div id="rotating-item-list"> </div> </body> </html>

ACHTUNG: achte mal auf deinen RAM verbrauch, für das reload lösche ich content und erstelle ihn neu, ich hoffe da ist kein memory leak dabei :D

Zitat:

Zitat von Ceos

Finale Fassung!!!!

ich habe die links in ein array gepackt und nur minimales feedback eingebaut, wenn man zu wenig einträge ind er liste hat doer wenn der script das wrapper div nicht finden kann!
außerdem habe ich den code mal kommentiert zum verständnis und in dem array kann man auch sagen ob die seite NACH DEM FADEOUT neu geladen werden soll oder nicht (soll bedeuten die pages laden gleich NACH dem ausblenden neu, sind also nicht top aktuell, dafür müsste ich mir nochmal einen in der logik abbrechen um quasi das übernächste object zu reloaden während das aktuelle angezeigt wird doer so)

ACHTUNG: achte mal auf deinen RAM verbrauch, für das reload lösche ich content und erstelle ihn neu, ich hoffe da ist kein memory leak dabei :D

hi,
dankeschön, ich teste es jetzt sofort!
Wie ich das mit dem RAM testen soll, weiß ich allerdings noch nicht....(?)
Hier ist dein Code mit ein paar Anpassungen meinerseits (urls berichtigt/ergänzt, Zeitdauer verlängert):

Code:

 <html lang="en"> <head> <meta charset="utf-8" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script> <script type="text/javascript"> //define list for all websites to cycle var URIList = [ {"data": "https://www.onvista.de/index/DAX-Index-20735", reload: true}, {"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: true}, {"data": "https://www.onvista.de/etf/DEKA-MDAX-UCITS-ETF-ETF-DE000ETFL441", reload: true}, {"data": "https://www.onvista.de/etf/DEKA-OEKOM-EURO-NACHHALTIGKEIT-UCITS-ETF-ETF-DE000ETFL474", reload: true}, {"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: true}, {"data": "https://www.onvista.de/aktien/Alibaba-Aktie-US01609W1027", reload: true}, {"data": "https://www.onvista.de/aktien/Facebook-Aktie-US30303M1027", reload: true}, {"data": "https://www.onvista.de/aktien/TENCENT-HOLDINGS-LTD-Aktie-KYG875721634", reload: true}, {"data": "http://www.zeitzonen.de/deutschland.html", reload: true} ]; //creates an object JQUERY node with the defined website that can be attached anywhere function createContent(data) { var newcontent = document.createElement("object"); newcontent.style.position = "fixed"; newcontent.style.top = 0; newcontent.style.left = 0; newcontent.style.minWidth = "100%"; newcontent.style.minHeight = "100%"; newcontent.id = "content-object"; newcontent.type = "text/html"; newcontent.data = data; return $(newcontent); } $(document).ready(function () { //create our rotating-items var divs = []; var containers = $("#rotating-item-list"); if(containers.length == 0) { alert("NO \"rotating-item-list\" CONTAINER FOUND!") } else if(containers.length > 1) { alert("ONLY 1 \"rotating-item-list\" CONTAINER ALLOWED!") } else { var divcontainer = containers.get(0); URIList.forEach(function(element){ //create a div that can be faded and uses all displayspace available while overlapping with identical divs var newdiv = document.createElement("div"); newdiv.style.position = "fixed"; newdiv.style.top = 0; newdiv.style.left= 0; if(divs.length > 0) { newdiv.style.display = "none"; } else { newdiv.style.display = "block"; } newdiv.style.minHeight = "100%"; newdiv.style.minHidth = "100%"; newdiv.class = "rotating-item"; newdiv.sandbox = ""; //create an object which loads and displays the page of interest var newcontent = createContent(element.data); //convert DOM to JQUERY newdiv = $(newdiv); //insert content in div newdiv.append(newcontent); //insert div in container divcontainer.append(newdiv.get(0)); divs.push(newdiv); }); if(divs.length < 2) { alert("TO FEW ENTRYS TO CYCLE"); } else { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 1000; //interval between items (in milliseconds) var itemInterval = 15000; //cross-fade time (in milliseconds) var fadeTime = 1000; //count number of items var numberOfItems = divs.length;//$('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); var lastItem = -1; //loop through the items var infiniteLoop = setInterval(function () { //fade out and when finished reload page divs[currentItem].fadeOut(fadeTime, function (){ if(URIList[lastItem].reload == true) { var fadednode = $(this); //grab JQUERY fadednode.empty(this.firstChild); //clear content var newcontent = createContent(URIList[lastItem].data); //create new content fadednode.append(newcontent); //append new content } }); lastItem = currentItem; if(currentItem == numberOfItems -1) { currentItem = 0; } else { currentItem++; } divs[currentItem].fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); } } }); </script> <title>Infinite Rotating Websites Using jQuery (JavaScript) - Unstyled</title> </head> <body> <div id="rotating-item-list"> </div> </body> </html>

einfach mal im taskmanager die auslastung des browser beobachten, sollte halt nach 2h nicht irgendwo im mehrstelligen GB bereich liegen :D

ich bin derzeit bei 5 onvista seiten bei 1.5GB relativ stabil

Zitat:

Zitat von Ceos

einfach mal im taskmanager die auslastung des browser beobachten, sollte halt nach 2h nicht irgendwo im mehrstelligen GB bereich liegen :D

ich bin derzeit bei 5 onvista seiten bei 1.5GB relativ stabil

ich sehe da keine Browser-Auslastung, nur :

Verlauf cpu-Auslastung (gesamt) in %
und
Arbeitsspeicher/Verwendungsverlauf des physikal. Speichers (gesamt)

PS,
so, neuer Tag, neues Glück:
ich lasse das Script jetzt einmal 2 Stunden lang laufen und vergleiche Gesamt-Speicher jetzt und dann 2 Stunden später.

cpu: i5 4200M, 2(+2) cores, 2,5GHz. 12 GB RAM

Neustart, es lief noch was im Hintergrund mit.

ganz ohne Firefox: 1,4 GB, 0-1% cpu-Auslastung
mit Firefox Roboternetz.de : 1,87 GB, 0-3% cpu-Auslastung

Start Script (14 urls), in einem 2. Tab neben Roboternetz.de, aber im selben Firefox-Window:
sofort ansteigend auf 2,3 GB, 2-32% cpu-Auslastung, im Sekundentakt langsam weiter steigend

nach 3 Minuten: max. 2,60 GB, 2-42% cpu-Auslastung

nach 10 Minuten: max. 2,87 GB, 3-33% cpu-Auslastung

nach 20 Minuten: max. 3,09 GB, 7-44% cpu-Auslastung

nach 30 Minuten: max. 3,08 GB, 4-35% cpu-Auslastung

nach 40 Minuten: max. 3,25 GB, 3-43% cpu-Auslastung

nach 60 Minuten: max. 3,21 GB, 3-38% cpu-Auslastung

nach 90 Minuten: max. 3,23 GB, 1-46% cpu-Auslastung

nach 120 Minuten: max. 3,13 GB, 0-38% cpu-Auslastung
nach 121 Minuten mit aktivem Script-Tab : max. 3,35 GB, 0-38% cpu-Auslastung

Jetzt Schließen des Script-Tabs, nur Roboternetz-Tab aktiv:
nach 122 Minuten: max. 2,04 GB, 0-1% cpu-Auslastung

erst später, während des Tests festgestellt:
die Werte wurden gemessen, als der Tab mit Roboternetz-Thread im Vordergrund war.
holt man zwischenzeitlich den Script-Tab in den Vordergrund, steigen die RAM-Werte durchschnittlich um bis zu 0,25 GB an.
Holt man dann wieder den Roboternetz-Tab in den Vordergrund, fallen sie nach ein paar Sekunden wieder um genau diese (bis zu) 0,25 GB ab.

Daher wurden zur besseren Vergleichbarkeit immer nur die Werte mit Roboternetz-Tab im Vordergrund notiert bzw. angeglichen.

Fazit:
mit 2 Firefox-Tabs, wobei der Script-Tab im Vordergund ist, scheinen 3,35 GB dauerhaft das Maximum zu sein, ansonsten gut 3,1 GB.

Überschießende GB werden sicherlich am ehesten durch Windows-Hintergrund-Tasks verursacht, z.B. auch Windows-Update-Services und Virenschutz-Pprogramme.

oh wow, wesentlcih mehr als bei mir, ich habe no-script plugin für meinen firefox, vielleich retten die unterdrückten werbebanner und third-party links einiges an speicher ... aber das ist halt onvista, MASSENHAFT werbung und unnötigen kram auf den chartseiten, eigentlich müsste man hingehen und die wertvollen daten aus den seiten schneiden, aber da hat onvista sicher was dagegen XD