Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

JavaScript-Problem, wenn Datenquelle nicht erreichbar

Frage Entwicklung JavaScript

Mitglied: SarekHL

SarekHL (Level 3) - Jetzt verbinden

15.03.2013 um 11:14 Uhr, 4070 Aufrufe, 13 Kommentare, 3 Danke

Hallo zusammen,

ich habe hier ein JavaScript, welches ich von einem Teilnehme des SelfHTML-Forum bekommen und geringfügig angepaßt habe (zum Thread hier klicken). Leider meldet sich der damalige Autor des Scriptes nicht mehr, so daß ich hoffe, daß mir hier jemand weiterhelfen kann.

Das Script hat die Aufgabe, auf einem Schaufenster-PC die Tagesschau-News aus dem RSS-Feed von tagesschau.de in Endlosschleife durchlaufen zu lassen. Das klappte bis vor ein paar Wochen auch völlig problemlos. In letzter Zeit kommt es aber immer häufiger mal vor, daß die Seite plötzlich leer bleibt und keine News mehr angezeigt werden.

Meine Vermutung dazu ist folgende: Ich habe festgestellt, daß der Tagesschau-Server ab und zu für ein paar Sekunden nicht erreichbar ist. Wenn das gerade dann passiert, wenn die News einmal durchgelaufen sind und der Feed neu geladen werden muß, dann klappt es mit dem Laden nicht, und dann scheint der Ablauf unterbrochen zu sein und die Seite bleibt leer.

Wenn das so ist, dann kann man da doch sicher eine Fehler-Abfangroutine einbauen, die, wenn der Feed gerade nicht geladen werden kann (oder query.yahooapis.com nicht erreichbar ist), in eine Warteschleife geht und es nach ein paar Sekunden noch mal probiert. Ich habe da Verschiedenes probiert, aber ich kenne mich mit JavaScript zu wenig aus, um da erfolgreich zu sein. Hat von Euch jemand eine Idee?

Hier ist erst mal das Script bzw. die komplette HTML-Datei:

01.
  
02.
<!doctype html> 
03.
<html> 
04.
<head> 
05.
        <title>Tagesschau Ticker</title> 
06.
        <!-- Hier holen wir uns erst mal jQuery von einem Google server damit wir das nicht selbst hosten müssen. --> 
07.
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
08.
        <script> 
09.
                var DELAY = 10000; // 10 Sekunden pro Nachricht 
10.
 
11.
                // Yahoo bietet einen coolen Service an mit dem man feeds nach JSON umwandeln lassen kann 
12.
                // und das sogar mit einer Callbackfunktion, ich habe sie hier mal 'callbackf' genannt. 
13.
                // Ich habe mal eine URL gebastelt die die daten vom Tageschau-Server holt. 
14.
                // Mehr dazu gibt es unter: http://developer.yahoo.com/yql/ 
15.
                var URL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D'http%3A%2F%2Fwww.tagesschau.de%2Fxml%2Frss2'&format=json&callback=callbackf"; 
16.
 
17.
                // Um einen extra server zum holen der Daten zu umgehen nutzen wir Yahoos YQL service mit einer 
18.
                // callback funktion. Dazu machen wir uns einen neuen script-tag und fügen ihn in den Body ein. 
19.
                // Dieser läd die daten von Yahoo und ruft gleichzeitig die callbackf-Funktion auf. 
20.
                function reload() { 
21.
                        var s = document.createElement("script"); 
22.
                        s.src = URL; 
23.
                        s.id = "datascript"; 
24.
                        document.body.appendChild(s); 
25.
26.
 
27.
                // Wenn das HTML geladen ist dann können wir die funktion reload() zum ersten mal aufrufen 
28.
                $(document).ready(reload); 
29.
 
30.
                // Wird vom Script aufgerufen das von Yahoo kommt. Es werden die Daten des Feeds im JSON 
31.
                // Format übergeben. 
32.
                function callbackf(data) 
33.
34.
                        // Damit der Speicher nicht voll läuft wenn das den ganzen Tag im Schaufenster läuft 
35.
                        // machen wir das script-tag mal weg, brauchen wir ja nicht mehr 
36.
                        $("#datascript").remove(); 
37.
 
38.
                        // Die items sind ja etwas tiefer im JSON drinn, die speichern wir mal in einer neuen Variable 
39.
                        var items = data.query.results.item; 
40.
 
41.
                        // Ich mache es mir hier einfach und baue den Inhalt komplett in einen String den ich dann mit 
42.
                        // innerHTML() einfüge, das ist so weit erst mal übersichtlicher und geht geht fast 
43.
                        // genauso schnell. 
44.
                        var content = ""; 
45.
                        for (var i = 0; i < items.length; i++) 
46.
47.
                                content += "<li>"; 
48.
                                content += "<h1>" + items[i].title + "</h1>"; 
49.
                                content += "<p>" + items[i].description + "</p>"; 
50.
                                content += "</li>"; 
51.
52.
 
53.
                        // Hier setzen wir den content ins <ul> rein 
54.
                        $("#list").html(content); 
55.
 
56.
                        // Hier verstecken wir jedes <li> damit alle erst mal unsichtbar sind 
57.
                        $("#list li").each(function (i, elem) 
58.
59.
                                $(elem).hide(); 
60.
                        }); 
61.
 
62.
                        // Hier zeigen wir das erste <li> mit einem fade-effekt an. Wenn dieser effekt fertig 
63.
                        // ist rufen wir die Funktion showNext() als callback auf (siehe dazu die jQuery doku für fadeIn()) 
64.
                        $("#list li:first-child").fadeIn("slow", showNext); 
65.
66.
 
67.
                // Diese funktion fadet das sichtbare <li> aus, entfernt es aus dem dom und fadet das nächste 
68.
                // element ein. 
69.
                function showNext() 
70.
71.
                        var first_child = $("#list li:first-child"); 
72.
 
73.
                        // Die jQuery-delay() funktion wartet mit der ausführung des nächsten so lange wie 
74.
                        // in DELAY angegeben. Danach fird fadeOut() aufgerufen, sobald das fertig ist 
75.
                        // wird die hier angegebene namenlose callback-funktion aufgerufen 
76.
                        first_child.delay(DELAY).fadeOut('slow', function() { 
77.
 
78.
                                // Erst entfernen wir das erste <li> 
79.
                                first_child.remove(); 
80.
 
81.
                                // dann holen wir uns das jetzt neue erste element (weil das andere ja weg ist) 
82.
                                var next_child = $("#list li:first-child"); 
83.
 
84.
                                if (next_child.length > 0) 
85.
86.
                                        // Wenn es noch ein Element in der <ul> gibt dann wird das reingefadet und 
87.
                                        // wenn fertig die funktion showNext() wieder aufgerufen. 
88.
                                        next_child.fadeIn('slow', showNext); 
89.
90.
                                else 
91.
92.
                                        // Falls keine <li>s mehr zur Verfügung stehen starten wir das Script wieder von vorne 
93.
                                        reload(); 
94.
95.
                        }); 
96.
97.
        </script> 
98.
        <style type="text/css"> 
99.
                /* Das CSS muss nat&uuml;rlich noch an die jeweiligen Bed&uuml;rfnisse angepasst werden */ 
100.
                * { margin: 15; padding: 0; } 
101.
                body { font-family: Verdana, Helvetica, sans-serif; background-color: #013773;} 
102.
                h1 {font-size: 24pt; color: #ffffff; text-align: left;} 
103.
                p {font-size: 20pt; color: #ffffff; text-align: left;} 
104.
                ul { list-style-type: none; } 
105.
                li { position: absolute; top: 20; left: 0; width: 480px; } 
106.
        </style> 
107.
</head> 
108.
<body> 
109.
<img style="border-width: 2px; border-style: solid; border-color: #ffffff;" src="logo_tagesschau24.png" align="center"> 
110.
        <ul id="list"> 
111.
                <!-- Dies hier ist unser Container in den wir alle Daten reinladen werden. --> 
112.
        </ul> 
113.
</body> 
114.
</html>
Laufen soll das ganze mit einem aktuellen Firefox.


Für zielführende Tipps Danke im Voraus,
Sarek
Mitglied: colinardo
15.03.2013, aktualisiert um 12:38 Uhr
Hi Sarek,
habe dein Code folgendermaßen geändert:
Da das Yahoo API bei einem Fehler in den JSON-Callback-Daten in dem Eigenschaftenfeld count die Anzahl der zurückgegebenen Elemente auf 0 setzt können wir darauf in dem Script reagieren. Für den Fall das zwischendurch die Verbindung zum Tagesschau-Server ausfällt, legt sich das Script in der globalen Variable CURRENTSTREAM ein Backup der Nachrichten an und zeigt diese an. Nach diesem Durchlauf der Nachrichten holt es erneut aktuelle Daten. Ist der Tagesschau-Server beim ersten Aufruf der Seite nicht erreichbar wird der Vorgang jede Sekunde wiederholt, bis Daten vorliegen.

Die Änderungen findest du in Zeile 8
var CURRENTSTREAM = "";
und Zeile 39-50
//Änderungen für den Fall das der Tagesschau-Server ausfällt oder ein Fehler auftritt 
var items; 
if (data.query.count > 0) { 
	 items = data.query.results.item; 
	 CURRENTSTREAM = items; 
}else{ 
	if (CURRENTSTREAM != ""){ 
	    items = CURRENTSTREAM; 
	}else{ 
	    window.setTimeout("reload()",1000); 
}	 
Der gesamte geänderte Code:
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
        <title>Tagesschau Ticker</title> 
05.
        <!-- Hier holen wir uns erst mal jQuery von einem Google server damit wir das nicht selbst hosten müssen. --> 
06.
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
07.
        <script> 
08.
		var CURRENTSTREAM = ""; 
09.
                var DELAY = 10000; // 10 Sekunden pro Nachricht 
10.
 
11.
                // Yahoo bietet einen coolen Service an mit dem man feeds nach JSON umwandeln lassen kann 
12.
                // und das sogar mit einer Callbackfunktion, ich habe sie hier mal 'callbackf' genannt. 
13.
                // Ich habe mal eine URL gebastelt die die daten vom Tageschau-Server holt. 
14.
                // Mehr dazu gibt es unter: http://developer.yahoo.com/yql/ 
15.
                var URL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D'http%3A%2F%2Fwww.tagesschau.de%2Fxml%2Frss2'&format=json&callback=callbackf"; 
16.
 
17.
                // Um einen extra server zum holen der Daten zu umgehen nutzen wir Yahoos YQL service mit einer 
18.
                // callback funktion. Dazu machen wir uns einen neuen script-tag und fügen ihn in den Body ein. 
19.
                // Dieser läd die daten von Yahoo und ruft gleichzeitig die callbackf-Funktion auf. 
20.
                function reload() { 
21.
                        var s = document.createElement("script"); 
22.
                        s.src = URL; 
23.
                        s.id = "datascript"; 
24.
                        document.body.appendChild(s); 
25.
26.
 
27.
                // Wenn das HTML geladen ist dann können wir die funktion reload() zum ersten mal aufrufen 
28.
                $(document).ready(reload); 
29.
 
30.
                // Wird vom Script aufgerufen das von Yahoo kommt. Es werden die Daten des Feeds im JSON 
31.
                // Format übergeben. 
32.
                function callbackf(data) 
33.
34.
					   
35.
				  // Damit der Speicher nicht voll läuft wenn das den ganzen Tag im Schaufenster läuft 
36.
				  // machen wir das script-tag mal weg, brauchen wir ja nicht mehr 
37.
				  $("#datascript").remove(); 
38.
 
39.
                                  //Änderungen für den Fall das der Tagesschau-Server ausfällt oder ein Fehler auftritt 
40.
				  var items; 
41.
				  if (data.query.count > 0) { 
42.
					  items = data.query.results.item; 
43.
					  CURRENTSTREAM = items; 
44.
				  }else{ 
45.
					  if (CURRENTSTREAM != ""){ 
46.
						  items = CURRENTSTREAM; 
47.
					  }else{ 
48.
						  window.setTimeout("reload()",1000); 
49.
50.
				  }	   
51.
 
52.
				  // Ich mache es mir hier einfach und baue den Inhalt komplett in einen String den ich dann mit 
53.
				  // innerHTML() einfüge, das ist so weit erst mal übersichtlicher und geht geht fast 
54.
				  // genauso schnell. 
55.
				  var content = ""; 
56.
				  for (var i = 0; i < items.length; i++) 
57.
58.
						  content += "<li>"; 
59.
						  content += "<h1>" + items[i].title + "</h1>"; 
60.
						  content += "<p>" + items[i].description + "</p>"; 
61.
						  content += "</li>"; 
62.
63.
 
64.
				  // Hier setzen wir den content ins <ul> rein 
65.
				  $("#list").html(content); 
66.
 
67.
				  // Hier verstecken wir jedes <li> damit alle erst mal unsichtbar sind 
68.
				  $("#list li").each(function (i, elem) 
69.
70.
						  $(elem).hide(); 
71.
				  }); 
72.
 
73.
				  // Hier zeigen wir das erste <li> mit einem fade-effekt an. Wenn dieser effekt fertig 
74.
				  // ist rufen wir die Funktion showNext() als callback auf (siehe dazu die jQuery doku für fadeIn()) 
75.
				  $("#list li:first-child").fadeIn("slow", showNext); 
76.
						 
77.
78.
 
79.
                // Diese funktion fadet das sichtbare <li> aus, entfernt es aus dem dom und fadet das nächste 
80.
                // element ein. 
81.
                function showNext() 
82.
83.
                        var first_child = $("#list li:first-child"); 
84.
 
85.
                        // Die jQuery-delay() funktion wartet mit der ausführung des nächsten so lange wie 
86.
                        // in DELAY angegeben. Danach fird fadeOut() aufgerufen, sobald das fertig ist 
87.
                        // wird die hier angegebene namenlose callback-funktion aufgerufen 
88.
                        first_child.delay(DELAY).fadeOut('slow', function() { 
89.
 
90.
                                // Erst entfernen wir das erste <li> 
91.
                                first_child.remove(); 
92.
 
93.
                                // dann holen wir uns das jetzt neue erste element (weil das andere ja weg ist) 
94.
                                var next_child = $("#list li:first-child"); 
95.
 
96.
                                if (next_child.length > 0) 
97.
98.
                                        // Wenn es noch ein Element in der <ul> gibt dann wird das reingefadet und 
99.
                                        // wenn fertig die funktion showNext() wieder aufgerufen. 
100.
                                        next_child.fadeIn('slow', showNext); 
101.
102.
                                else 
103.
104.
                                        // Falls keine <li>s mehr zur Verfügung stehen starten wir das Script wieder von vorne 
105.
                                        reload(); 
106.
107.
                        }); 
108.
109.
        </script> 
110.
        <style type="text/css"> 
111.
                /* Das CSS muss natürlich noch an die jeweiligen Bedürfnisse angepasst werden */ 
112.
                * { margin: 15; padding: 0; } 
113.
                body { font-family: Verdana, Helvetica, sans-serif; background-color: #013773;} 
114.
                h1 {font-size: 24pt; color: #ffffff; text-align: left;} 
115.
                p {font-size: 20pt; color: #ffffff; text-align: left;} 
116.
                ul { list-style-type: none; } 
117.
                li { position: absolute; top: 20; left: 0; width: 480px; } 
118.
        </style> 
119.
</head> 
120.
<body> 
121.
<img style="border-width: 2px; border-style: solid; border-color: #ffffff;" src="logo_tagesschau24.png" align="center"> 
122.
        <ul id="list"> 
123.
                <!-- Dies hier ist unser Container in den wir alle Daten reinladen werden. --> 
124.
        </ul> 
125.
</body> 
126.
</html>
Grüße Uwe
Bitte warten ..
Mitglied: SarekHL
15.03.2013, aktualisiert um 15:39 Uhr
Hallo Uwe,

erst mal Danke für Deine schnelle Reaktion!

Da das Yahoo API bei einem Fehler in den JSON-Callback-Daten in dem Eigenschaftenfeld count die Anzahl der zurückgegebenen Elemente auf 0 setzt können wir darauf in dem Script reagieren.
Für den Fall das zwischendurch die Verbindung zum Tagesschau-Server ausfällt, legt sich das Script in der globalen Variable CURRENTSTREAM ein Backup der Nachrichten an und zeigt diese an. Nach diesem Durchlauf der Nachrichten holt es erneut aktuelle Daten.

Also, ich habe die geänderte Seite jetzt mal knapp eineinhalb Stunden laufen lassen, und da gab es keinen Aussetzer. Das klingt schon mal gut, allerdings weiß ich natürlich nicht, ob es sonst in diesen eineinhalb Stunden einen Aussetzer gegeben hätte.

Den Härtetest hat das Script allerdings nicht bestanden. Wenn ich die Internetverbindung trenne, also nicht nur die Tagesschau-Seite, sondern gar nichts mehr erreichbar ist, dann hängt sich der Ticker beim Versuch, das Feed neu zu laden, auf und läuft nach Wiederherstellung der Verbindung auch nicht wieder von alleine los. Wenn ich Deine Erläuterung richtig verstanden habe, basiert Deine Lösung auf dem Rückgabewert der Yahoo-API. Aber auch die Verbindung zu Yahoo kann ja mal weg sein (was in dem Härtetest ja der Fall war). Was passiert dann?


Ist der Tagesschau-Server beim ersten Aufruf der Seite nicht erreichbar wird der Vorgang jede Sekunde wiederholt, bis Daten vorliegen.

Das funktionierte beim Härtetest auch nicht - vermutlich aus dem gleichen Grund.


Ich habe mir gerade mal die verknüpfte JavaScript-Quelldatei ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js herunterladen und lokal auf meinem Schaufenster-PC abgelegt (und die Referenz in der HTML-Datei natürlich entsprechend geändert). Das geht auch, und dann wäre es schon mal kein Problem mehr, wenn ajax.googleapis.com nicht erreichbar ist. Mit der Yahoo-API geht das nicht so leicht, oder?
Bitte warten ..
Mitglied: colinardo
15.03.2013 um 16:10 Uhr
Du kannst die Erreichbarkeit einer Seite mit Ajax überprüfen. Eine solche Funktion könnte mit jQuery-Ajax z.B. so aussehen:
01.
function ping(){ 
02.
       $.ajax({ 
03.
          url: 'http://query.yahooapis.com', 
04.
          success: function(result){ 
05.
             return true; 
06.
          },      
07.
          error: function(result){ 
08.
             return false; 
09.
10.
       }); 
11.
}
Diese könntest du dann in die reload() Funkton einbauen:

01.
function ping(targetURL){ 
02.
   $.ajax({ 
03.
	   url: targetURL, 
04.
	   success: function(result){ 
05.
			return true; 
06.
		}, 
07.
		error: function(result){ 
08.
			return false; 
09.
10.
   }); 
11.
12.
 
13.
function reload() { 
14.
	if (ping('http://query.yahooapis.com') == true){ 
15.
		var s = document.createElement("script"); 
16.
		s.src = URL; 
17.
		s.id = "datascript"; 
18.
		document.body.appendChild(s); 
19.
	}else{ 
20.
		window.setTimeout("reload()",2000);	 
21.
22.
}


Die jQuery Libraries die Google zur Verfügung stellt kannst du hier nachlesen(nimm am besten eine neuere Version):
https://developers.google.com/speed/libraries/devguide?hl=fr#jquery

happy coding
Uwe
Bitte warten ..
Mitglied: SarekHL
15.03.2013, aktualisiert um 18:24 Uhr
Diese könntest du dann in die reload() Funkton einbauen:

Ich habe das richtig verstanden, daß ich die bisherige Reload-Function durch den Inhalt Deines zweiten Codeblocks (also die Ping-Function und die geänderte Reload-Function) ersetzen muß?
Das klappt bei mir leider nicht. Soll heißen, jetzt werden gar keine News mehr angezeigt, auch wenn die Internetverbindung steht.

Ich habe auch versucht, das "http://" aus der targetURL herauszulassen (Ping kenne ich eigentlich nur ohne Protokollangabe), aber das geht auch nicht.

Edit 18:21 Uhr: Ich habe mal ein alert (ping('query.yahooapis.com')); in die Reload-Function eingebaut. Die Ping-Function gibt offenbar weder true noch false, sondern undefined zurück. Offenbar gibt es ein Problem mit dem Ajax!?


Die jQuery Libraries die Google zur Verfügung stellt kannst du hier nachlesen(nimm am besten eine neuere Version):
https://developers.google.com/speed/libraries/devguide?hl=fr#jquery

Ich habe mir jetzt die 1.9.1 heruntergeladen - also daran liegt es wohl nicht.



happy coding

Wenn ich auch nur die Hälfte des Codes, den Du mir da geschrieben hast, verstehen würde, dann wäre ich froh

Offen war noch die Frage, ob ich mir die Funktion, die über Yahoo aufgerufen wird, auch auf den lokalen Rechner legen kann, wie ich es mit der jQuery-Library kann.
Bitte warten ..
Mitglied: colinardo
15.03.2013 um 18:23 Uhr
Sorry da war ich zu schnell mit meinen Code-Schnippseln (Bin im Moment mit allen möglichen Programmiersprachen zu gange,da passiert so was mal). Das obige funktioniert leider nicht da bei Ajax die same origin policy restriction im Browser greift, was bedeutet das du damit nicht andere Domains auf Verfügbarkeit prüfen kannst.
Melde mich später nochmal ...
Bitte warten ..
Mitglied: SarekHL
15.03.2013, aktualisiert um 18:28 Uhr
Zitat von colinardo:
Das obige funktioniert leider nicht da bei Ajax die same origin policy restriction im Browser greift, was bedeutet das du damit nicht andere Domains auf Verfügbarkeit prüfen kannst.

Ah, ok ...

Kann man diese Policy im Firefox irgendwo ausschalten? Es muß ja nur auf einem einzigen Browser laufen, und den kann ich ja so konfigurieren, daß es geht (wenn man das denn konfigurieren kann).


Melde mich später nochmal ...

Danke ...
Bitte warten ..
Mitglied: colinardo
15.03.2013 um 19:19 Uhr
Kann man diese Policy im Firefox irgendwo ausschalten? Es muß ja nur auf einem einzigen Browser laufen, und den kann ich ja
so konfigurieren, daß es geht (wenn man das denn konfigurieren kann).
Zusammen mit diesem AddIn für Firefox: https://addons.mozilla.org/en-US/firefox/addon/forcecors/
('Du aktivierst es in der Statusleiste mit Klick auf CORS; es ist dann rot eingefärbt)
und zusammen mit diesem Code hat es bei mir funktioniert:

01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
05.
        <title>Tagesschau Ticker</title> 
06.
        <!-- Hier holen wir uns erst mal jQuery von einem Google server damit wir das nicht selbst hosten müssen. --> 
07.
<script src="Programmierung/HTML5/jquery-1.7.min.js"></script> 
08.
<script type="text/javascript"> 
09.
				var CURRENTSTREAM = ""; 
10.
                var DELAY = 10000; // 10 Sekunden pro Nachricht 
11.
 
12.
                // Yahoo bietet einen coolen Service an mit dem man feeds nach JSON umwandeln lassen kann 
13.
                // und das sogar mit einer Callbackfunktion, ich habe sie hier mal 'callbackf' genannt. 
14.
                // Ich habe mal eine URL gebastelt die die daten vom Tageschau-Server holt. 
15.
                // Mehr dazu gibt es unter: http://developer.yahoo.com/yql/ 
16.
                var URL = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D'http%3A%2F%2Fwww.tagesschau.de%2Fxml%2Frss2'&format=json&callback=callbackf"; 
17.
 
18.
                // Um einen extra server zum holen der Daten zu umgehen nutzen wir Yahoos YQL service mit einer 
19.
                // callback funktion. Dazu machen wir uns einen neuen script-tag und fügen ihn in den Body ein. 
20.
                // Dieser läd die daten von Yahoo und ruft gleichzeitig die callbackf-Funktion auf. 
21.
				 
22.
				function reload() { 
23.
					$.ajax({ 
24.
					   url: 'http://query.yahooapis.com', 
25.
					   cache:false, 
26.
					   success: function(result){ 
27.
							var s = document.createElement("script"); 
28.
							s.src = URL; 
29.
							s.id = "datascript"; 
30.
							document.body.appendChild(s); 
31.
						}, 
32.
						error: function(result){ 
33.
							if (CURRENTSTREAM == ""){ 
34.
								window.setTimeout("reload()",2000);	 
35.
							}else{ 
36.
								callbackf(CURRENTSTREAM); 
37.
38.
39.
				   }); 
40.
41.
 
42.
                // Wenn das HTML geladen ist dann können wir die funktion reload() zum ersten mal aufrufen 
43.
                $(document).ready(reload); 
44.
 
45.
                // Wird vom Script aufgerufen das von Yahoo kommt. Es werden die Daten des Feeds im JSON 
46.
                // Format übergeben. 
47.
                function callbackf(data) 
48.
49.
					   
50.
				  // Damit der Speicher nicht voll läuft wenn das den ganzen Tag im Schaufenster läuft 
51.
				  // machen wir das script-tag mal weg, brauchen wir ja nicht mehr 
52.
				  $("#datascript").remove(); 
53.
				   
54.
				  //Änderungen für den Fall das der Tagesschau-Server ausfällt oder ein Fehler auftritt 
55.
				  var items; 
56.
				  if (data.query.count > 0) { 
57.
					  items = data.query.results.item; 
58.
					  CURRENTSTREAM = data; 
59.
				  }else{ 
60.
					  if (CURRENTSTREAM !== ""){ 
61.
						  items = CURRENTSTREAM.query.results.item; 
62.
					  }else{ 
63.
						  window.setTimeout("reload()",1000); 
64.
65.
				  }	   
66.
 
67.
				  // Ich mache es mir hier einfach und baue den Inhalt komplett in einen String den ich dann mit 
68.
				  // innerHTML() einfüge, das ist so weit erst mal übersichtlicher und geht geht fast 
69.
				  // genauso schnell. 
70.
				  var content = ""; 
71.
				  for (var i = 0; i < items.length; i++) 
72.
73.
						  content += "<li>"; 
74.
						  content += "<h1>" + items[i].title + "</h1>"; 
75.
						  content += "<p>" + items[i].description + "</p>"; 
76.
						  content += "</li>"; 
77.
78.
 
79.
				  // Hier setzen wir den content ins <ul> rein 
80.
				  $("#list").html(content); 
81.
 
82.
				  // Hier verstecken wir jedes <li> damit alle erst mal unsichtbar sind 
83.
				  $("#list li").each(function (i, elem) 
84.
85.
						  $(elem).hide(); 
86.
				  }); 
87.
 
88.
				  // Hier zeigen wir das erste <li> mit einem fade-effekt an. Wenn dieser effekt fertig 
89.
				  // ist rufen wir die Funktion showNext() als callback auf (siehe dazu die jQuery doku für fadeIn()) 
90.
				  $("#list li:first-child").fadeIn("slow", showNext); 
91.
						 
92.
93.
                // Diese funktion fadet das sichtbare <li> aus, entfernt es aus dem dom und fadet das nächste 
94.
                // element ein. 
95.
                function showNext() 
96.
97.
                        var first_child = $("#list li:first-child"); 
98.
 
99.
                        // Die jQuery-delay() funktion wartet mit der ausführung des nächsten so lange wie 
100.
                        // in DELAY angegeben. Danach fird fadeOut() aufgerufen, sobald das fertig ist 
101.
                        // wird die hier angegebene namenlose callback-funktion aufgerufen 
102.
                        first_child.delay(DELAY).fadeOut('slow', function() { 
103.
 
104.
                                // Erst entfernen wir das erste <li> 
105.
                                first_child.remove(); 
106.
 
107.
                                // dann holen wir uns das jetzt neue erste element (weil das andere ja weg ist) 
108.
                                var next_child = $("#list li:first-child"); 
109.
 
110.
                                if (next_child.length > 0) 
111.
112.
                                        // Wenn es noch ein Element in der <ul> gibt dann wird das reingefadet und 
113.
                                        // wenn fertig die funktion showNext() wieder aufgerufen. 
114.
                                        next_child.fadeIn('slow', showNext); 
115.
116.
                                else 
117.
118.
                                        // Falls keine <li>s mehr zur Verfügung stehen starten wir das Script wieder von vorne 
119.
                                        reload(); 
120.
121.
                        }); 
122.
123.
        </script> 
124.
        <style type="text/css"> 
125.
                /* Das CSS muss natürlich noch an die jeweiligen Bedürfnisse angepasst werden */ 
126.
                * { margin: 15; padding: 0; } 
127.
                body { font-family: Verdana, Helvetica, sans-serif; background-color: #013773;} 
128.
                h1 {font-size: 24pt; color: #ffffff; text-align: left;} 
129.
                p {font-size: 20pt; color: #ffffff; text-align: left;} 
130.
                ul { list-style-type: none; } 
131.
                li { position: absolute; top: 20; left: 0; width: 480px; } 
132.
        </style> 
133.
</head> 
134.
<body> 
135.
<img style="border-width: 2px; border-style: solid; border-color: #ffffff;" src="logo_tagesschau24.png" align="center"> 
136.
        <ul id="list"> 
137.
                <!-- Dies hier ist unser Container in den wir alle Daten reinladen werden. --> 
138.
        </ul> 
139.
</body> 
140.
</html>
Bitte warten ..
Mitglied: SarekHL
15.03.2013, aktualisiert um 20:09 Uhr
Zitat von colinardo:
Zusammen mit diesem AddIn für Firefox: https://addons.mozilla.org/en-US/firefox/addon/forcecors/ und zusammen mit diesem Code hat es bei mir funktioniert

Bei mir merkwürdigerweise nicht. Aber selbst wenn es damit laufen würde, bringt mich das nicht weiter. Nach einem Neustart von Firefox ist das AddOn wieder inaktiv und müßte neu per Mausklick aktiviert werden. Nur dummerweise hängen an dem Schaufenster-PC weder Tastatur noch Maus. Der PC startet morgens um 7 Uhr automatisch ... da tut kein Mensch etwas dazu.

Edit 20:08 Uhr: Kann das hier helfen, wenn es mit AJAX nicht geht? Ich finde allerdings nicht heraus, wie man es anwendet ...
Bitte warten ..
Mitglied: SarekHL
16.03.2013, aktualisiert um 06:33 Uhr
Zitat von SarekHL:
Bei mir merkwürdigerweise nicht.

Da muß ich mich korrigieren. Ich hatte zuerst nicht bemerkt, daß Du den Link auf jQuery geändert hast. Bei mir im Dateisystem liegt die jquery.min.js nun mal nicht in Programmierung/HTML5/ Also grundsätzlich läuft das auch bei mir, aber:

Nach einem Neustart von Firefox ist das CORS-AddOn wieder inaktiv und müßte neu per Mausklick aktiviert werden. Nur dummerweise hängen an dem Schaufenster-PC weder Tastatur noch Maus. Der PC startet morgens um 7 Uhr automatisch ... da tut kein Mensch etwas dazu.

Insofern bringt diese Lösung mir nichts.
Daher gilt weiter meine Frage:

Kann das hier helfen, wenn es mit AJAX nicht geht? Da geht es um die Implementierung einer Ping-Funktion mit jQuery. Ich finde allerdings nicht heraus, wie man es anwendet ...

Oder kann sonst vielleicht das hier helfen? Ich verstehe das so, daß CORS seit Version 3.5 ohnehin in Firefox implementiert ist und man das irgendwie nutzen kann. Kann aber sein, daß ich mich täusche, mein Englisch ist nicht berauschend ...
Bitte warten ..
Mitglied: colinardo
16.03.2013 um 09:48 Uhr
> Nach einem Neustart von Firefox ist das CORS-AddOn wieder inaktiv und müßte neu per Mausklick aktiviert werden.
Schicke Dir per PN das modifizierte CORS-AddIn mit beim Start von Firefox aktiviertern CORS-Headern. Die Option es an und auszuschalten habe ich entfernt. Das sollte dein Problem lösen.


Oder kann sonst vielleicht das hier helfen? Ich verstehe
Das geht auch nur wenn du CORS mit dem AddOn aktivierst.
Bitte warten ..
Mitglied: SarekHL
16.03.2013 um 10:19 Uhr
Zitat von colinardo:
Schicke Dir per PN das modifizierte CORS-AddIn mit beim Start von Firefox aktiviertern CORS-Headern. Die Option es an und auszuschalten habe ich entfernt. Das sollte dein Problem lösen.

Jepp, jetzt läuft es problemlos. DANKE!


Das geht auch nur wenn du CORS mit dem AddOn aktivierst.

Schade ... mit meinen Englischkenntnissen hatte es so ausgesehen, daß man das auch im Quellcode der Seite bzw. des JavaScripts verankern kann. Das wäre mir lieber gewesen, denn um das Plugin im Firefox des Schaufenster-PCs zu installieren muß ich direkt an den Rechner ran. Der steht leider in einem Raum, für den ich mir immer erst umständlich einen Schlüssel besorgen muß
Bitte warten ..
Mitglied: colinardo
16.03.2013 um 13:00 Uhr
Habe noch eine Alternative für dich die auch ohne CORS im Browser funktioniert:
Diese versucht ein kleines Bild auf einer Seite von Yahoo zu laden(Um das Cachen des Bildes zu umgehen wird bei jedem laden des kleinen Bildes die Uhrzeit als Querystring mit angehängt). Wenn dies gelingt fährt das Script normal fort ansonsten wiederholt es den Vorgang alle 2 Sekunden.

ersetzte die reload()-Funktion durch diese:
01.
function reload() { 
02.
	var imgObject = new Image(); 
03.
	imgObject.src = "http://l.yimg.com/a/i/us/pps/breadcrumb-arrow.gif?pingdat=" + new Date().getTime(); 
04.
	window.setTimeout(function(){ 
05.
	if (imgObject.height > 0){ 
06.
		var s = document.createElement("script"); 
07.
		s.src = URL; 
08.
		s.id = "datascript"; 
09.
		document.body.appendChild(s); 
10.
	}else{ 
11.
		if (CURRENTSTREAM == ""){ 
12.
			window.setTimeout("reload()",2000);	 
13.
		}else{ 
14.
			callbackf(CURRENTSTREAM); 
15.
16.
17.
	},500); 
18.
}
Grüße Uwe
Bitte warten ..
Mitglied: SarekHL
16.03.2013 um 13:09 Uhr
Zitat von colinardo:
Habe noch eine Alternative für dich die auch ohne CORS im Browser funktioniert:
Diese versucht ein kleines Bild auf einer Seite von Yahoo zu laden. Wenn dies gelingt fährt das Script normal fort ansonsten wiederholt es den Vorgang alle 2 Sekunden.

Diese Variante hatte ich auch schon gefunden, habe sie aber verworfen. Wenn l.yimg.com oder www.yahoo.com erreichbar sind, heißt das nicht unbedingt, daß auch query.yahooapis.com erreichbar ist. Und direkt auf query.yahooapis.com habe ich keine Bilder ausfindig machen können.

Ist aber kein Problem, ich habe mir inzwischen schon den Schlüssel besorgt und Dein modifiziertes CORS-AddOn auf dem Schaufensterrechner installiert.

Nochmal Danke!
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(2)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
Heiß diskutierte Inhalte
LAN, WAN, Wireless
gelöst Server erkennt Client nicht wenn er ausserhalb des DHCP Pools liegt (28)

Frage von Mar-west zum Thema LAN, WAN, Wireless ...

Windows Server
Server 2008R2 startet nicht mehr (Bad Patch 0xa) (18)

Frage von Haures zum Thema Windows Server ...

Outlook & Mail
Outlook 2010 findet ost datei nicht (18)

Frage von Floh21 zum Thema Outlook & Mail ...