113805
Feb 19, 2015, updated at Mar 02, 2015 (UTC)
2866
16
0
Javascript: Body class auslesen und dann eine Box färben
Hallo zusammen
Ich habe da eine kleine Frage.
Nun ich verwende die Software Xibo.
Ich habe eine Div Box welches ich mit CSS erstellt habe.
und ich möchte gerne das "background:#0FF;" dem anpasst.
Jedoch soll sie aber eine andere Seite auslesen und nicht die Seite auf welche ich das Javascript haben werde.
Seite1 besitzt das
Seite2 sollte das Javascript besitzen mit den DIV boxen welche sich das rot färbt, da auf Seite 1 ist.
Ist das möglich?
Ich habe da ein Anfang aber komme jedoch nicht weiter:
Ich habe da eine kleine Frage.
Nun ich verwende die Software Xibo.
Ich habe eine Div Box welches ich mit CSS erstellt habe.
div.on {
text-align:center;
background:#0FF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
color:#0AA;
}und ich möchte gerne das "background:#0FF;" dem
<BODY class=" "> Jedoch soll sie aber eine andere Seite auslesen und nicht die Seite auf welche ich das Javascript haben werde.
Seite1 besitzt das
<BODY class="red"> Seite2 sollte das Javascript besitzen mit den DIV boxen welche sich das rot färbt, da auf Seite 1
<BODY class="red"> Ist das möglich?
Ich habe da ein Anfang aber komme jedoch nicht weiter:
if( document.body.className.match('red') ){
}
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 263926
Url: https://administrator.de/contentid/263926
Printed on: April 19, 2024 at 13:04 o'clock
16 Comments
Latest comment
Versuch mal deine Formulierung anzupassen, ich wüsste jetzt viele Lösungen, aber ich verstehe die Frage nicht (nach 3 maligen lesen).
Zitat von @s7mahess:
Versuch mal deine Formulierung anzupassen, ich wüsste jetzt viele Lösungen, aber ich verstehe die Frage nicht (nach 3
maligen lesen).
Versuch mal deine Formulierung anzupassen, ich wüsste jetzt viele Lösungen, aber ich verstehe die Frage nicht (nach 3
maligen lesen).
Hallo
Nun also, ich habe 2 Seiten. Die Seite1 und die Seite2.
Die Seite1 besitzt einen Body Tag dessen Class "red" ist. Also <BODY class="red"></body>
Die Seite2 besitzt die von mir erstellte DIV BOX welches ich mithilfe von CSS erstellt habe.
Nun sollte die die BOX auf Seite2 sich dem Body Class der Seite1 anpassen. Ist also der Body class=red, sollte sich der Background meine DIV BOX auf RED umstellen.
Der Grund ist folgender; meine Xymon Seite (Monitoringtool) ändert den Body class Tag je nach Status der Server, und deswegen kann der BODY CLASS red, green, yellow oder purple sein.
Ich hoffe ich konnte einbisschen genauer werden.
Vielen Dank für deine Hilfe.
Gruss
Moin,
hier ein Beispiel. Vorausgesetzt deine Seite welche du abfragen willst liegt auf der gleichen Domain wo das Script läuft. Wenn nicht, greifen Cross-Site-Scripting Sicherheitsmechnissmen und nur Seiten welche dies mit dem CORS Header (Access-Control-Allow-Origin: *) erlauben, können dann abgefragt werden !! Ansonsten würde ich es dann via PHP machen...
Gruß jodel32
hier ein Beispiel. Vorausgesetzt deine Seite welche du abfragen willst liegt auf der gleichen Domain wo das Script läuft. Wenn nicht, greifen Cross-Site-Scripting Sicherheitsmechnissmen und nur Seiten welche dies mit dem CORS Header (Access-Control-Allow-Origin: *) erlauben, können dann abgefragt werden !! Ansonsten würde ich es dann via PHP machen...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<style type="text/css">
.red { background-color: red;}
</style>
<script type="text/javascript">
function checkClass(){
var url = "http://domain.xyz/seite1.php";
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'document';
xhr.onload = function(e) {
var doc = this.response;
if (doc.body.className.match(/red/i)){
document.getElementById("test").className = "red";
}
};
xhr.send();
}
</script>
<body onLoad="checkClass()">
<div id="test" style="width:200px; height: 200px; border: 1px solid gray"></div>
</body>
</html>
1Zitat von @114757:
Moin,
hier ein Beispiel. Vorausgesetzt deine Seite welche du abfragen willst liegt auf der gleichen Domain wo das Script läuft.
Wenn nicht, greifen Cross-Site-Scripting Sicherheitsmechnissmen und nur Seiten welche dies mit dem
CORS Header (Access-Control-Allow-Origin: *) erlauben,
können dann abgefragt werden !! Ansonsten würde ich es dann via PHP machen...
Gruß jodel32
Moin,
hier ein Beispiel. Vorausgesetzt deine Seite welche du abfragen willst liegt auf der gleichen Domain wo das Script läuft.
Wenn nicht, greifen Cross-Site-Scripting Sicherheitsmechnissmen und nur Seiten welche dies mit dem
CORS Header (Access-Control-Allow-Origin: *) erlauben,
können dann abgefragt werden !! Ansonsten würde ich es dann via PHP machen...
> <!doctype html>
> <html>
> <head>
> <meta charset="utf-8">
> <title>Demo</title>
> </head>
> <style type="text/css">
> .red { background-color: red;}
> </style>
> <script type="text/javascript">
> function checkClass(){
> var url = "http://domain.xyz/seite1.php";
> var xhr = new XMLHttpRequest();
> xhr.open('GET',url);
> xhr.responseType = 'document';
> xhr.onload = function(e) {
> var doc = this.response;
> if (doc.body.className.match(/red/i)){
> document.getElementById("test").className = "red";
> }
> };
> xhr.send();
> }
> </script>
>
> <body onLoad="checkClass()">
> <div id="test" style="width:200px; height: 200px; border: 1px solid gray"></div>
> </body>
> </html>
> Okay zu erst einmal vielen Dank für die Idee.
Jedoch funktioniert das ganze irgendwie nicht so wie es sollte.
Also ich habe ein Seite1 sieht so aus:
<html>
<head>
<title>Titel</title>
</head>
<body class="red">
</body>Und die Seite2 so:
<html>
<head>
<title>Titel</title>
<style type="text/css">
div.on {
text-align:center;
background:#0FF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
color:#0AA;
}
</style>
</head>
<body>
<div class="on">1</div>
</body>
</html>Nun sollte background:#0FF; aus dem CSS zu RED werden.
EDIT:
Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt. Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen.. ^^
Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt.
Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen..
Genau Stichwort: "CORS Header" , wie oben geschrieben. Wenn du der Admin von Seite1 bist, dann musst du die Seite z.B. via PHP mit dem richtigen Header ausliefern:Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen..
<?php
header('Access-Control-Allow-Origin: *');
?>
Im Link steht das ebenfalls ...Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:
Wobei man das ganze natürlich auch auf die anfragende Domain einschränken kann, anstatt ein Sternchen zu verwenden. Hol dir die Daten der Seite direkt mit PHP, da gelten diese Cross-Site-Scripting-Einschränkungen nicht.
Gruß jodel32
Zitat von @114757:
> Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt.
> Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen..
Genau Stichwort: "CORS Header" , wie oben geschrieben. Wenn du der Admin von Seite1 bist, dann musst du die Seite z.B.
via PHP mit dem richtigen Header ausliefern:
Dann klappt das 100% Im Link steht das ebenfalls ...
Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:
Wobei man das ganze natürlich auch auf die anfragende Domain einschränken kann, anstatt ein Sternchen zu verwenden.
Gruß jodel32
> Habe herausgefunden das es warscheinlich am nicht gleichen Netz liegt.
> Wie kann ich das machen das es auch mit anderen Netzen funktioniert. Habe das irgendwie nicht ganz begriffen..
Genau Stichwort: "CORS Header" , wie oben geschrieben. Wenn du der Admin von Seite1 bist, dann musst du die Seite z.B.
via PHP mit dem richtigen Header ausliefern:
> <?php
> header('Access-Control-Allow-Origin: *');
> ?>
> Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:
Wobei man das ganze natürlich auch auf die anfragende Domain einschränken kann, anstatt ein Sternchen zu verwenden.
Gruß jodel32
Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
Zitat von @113805:
Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Ja, aber nicht im nur einfach in die HTML-Seite schreiben, dein Server muss schon PHP unterstützen bzw. parsen !Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
NEIN! Obiges Script läuft dann sofort ...hier einwandfrei getestet.Zitat von @114757:
> Zitat von @113805:
> Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Ja, aber nicht im nur einfach in die HTML-Seite schreiben, dein Server muss schon PHP unterstützen bzw. parsen !
> Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
NEIN! Obiges Script läuft dann sofort ...hier einwandfrei getestet.
> Zitat von @113805:
> Okay so muss ich also auf Seite1 eins den Header mit dem Code ergänzen.
Ja, aber nicht im nur einfach in die HTML-Seite schreiben, dein Server muss schon PHP unterstützen bzw. parsen !
> Aber muss ich dann im JavaScript nicht einen "createCORSRequest" oder ähnlich machen?
NEIN! Obiges Script läuft dann sofort ...hier einwandfrei getestet.
Okay funktioniert soweit.
Wie sieht es aus wenn ich jetzt noch "yellow" und "green" möcht hinzufügen?
EDIT:
Vielleicht ist es am Besten wenn ich meinen ganzen Code zeige:
<html>
<head>
<title>Countdown</title>
<style type="text/css">
div.on {
text-align:center;
background:#0FF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
color:#0AA;
}
div.off {
text-align:center;
background:#FFF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
font-family:arial;
color:#CCC;
}
</style>
<script language="Javascript">
var countdown;
var countdown_number;
var countdown_number_zwei
var countdown_number_element;
var countdown_number_old;
function countdown_init() {
countdown_number = 1;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number < 7) {
countdown_number_old = "A" + ( countdown_number - 1 );
countdown_number_element = "A" + countdown_number;
document.getElementById(countdown_number_element).className = "on";
if(countdown_number >1){
document.getElementById(countdown_number_old).className = "off";
}
if(countdown_number < 7) {
countdown = setTimeout('countdown_trigger()', 11000);
countdown_number = countdown_number + 1;
}
}
}
function countdown_clear() {
clearTimeout(countdown);
}
</script>
</head>
<body onload="countdown_init()"><font face="Arial" size=1>
<div id="A1" class="off" ><font size=6>1</font></div> <br><br>
<div id="A2" class="off" ><font size=6>2</font></div> <br><br>
<div id="A3" class="off" ><font size=6>3</font></div> <br><br>
<div id="A4" class="off" ><font size=6>4</font></div> <br><br>
<div id="A5" class="off" ><font size=6>5</font></div> <br><br>
<div id="A6" class="off" ><font size=6>6</font></div> <br><br>
</font>
</body>
</html>Also ich habe hier 6 x eine Box die standardmässig mit der class="off" sind.
Jetzt will ich aber das diese sich verändern je nach dem Body Status.
Wie du siehst habe ich eine Art Countdown, die Box werden für eine ein paar Sekunden angzeigt und dann geht es zur nächsten Box.
Wie kann ich das realisieren?
if (doc.body.className.match(/red/i)){
document.getElementById("test").className = "red";
}
if (doc.body.className.match(/green/i)){
document.getElementById("test").className = "green";
}
if (doc.body.className.match(/yellow/i)){
document.getElementById("test").className = "yellow";
}Zitat von @114757:
> if (doc.body.className.match(/red/i)){
> document.getElementById("test").className = "red";
> }
> if (doc.body.className.match(/green/i)){
> document.getElementById("test").className = "green";
> }
> if (doc.body.className.match(/yellow/i)){
> document.getElementById("test").className = "yellow";
> }
> Und natürlich muss ich im CSS noch die für jede Farbe einen Eintrag machen.
Ich habe noch mein vorheriger Post bearbeitet, da ist noch eine weitere Frage.
Gruss und vielen Dank für die Hilfe!
<html>
<head>
<title>Countdown</title>
<style type="text/css">
div.on {
text-align:center;
background:#0FF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
color:#0AA;
}
div.off {
text-align:center;
background:#FFF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
font-family:arial;
color:#CCC;
}
.red{background-color:red !important}
.green{background-color:green !important}
.yellow{background-color:yellow !important}
</style>
<script language="Javascript">
var countdown;
var countdown_number;
var countdown_number_zwei
var countdown_number_element;
var countdown_number_old;
function countdown_init() {
countdown_number = 1;
countdown_trigger();
}
function countdown_trigger() {
getClassname(function(res){
if (res.match(/red|green|yellow/i)){
if(countdown_number < 7) {
countdown_number_old = "A" + ( countdown_number - 1 );
countdown_number_element = "A" + countdown_number;
var elActive = document.getElementById(countdown_number_element);
var elOld = document.getElementById(countdown_number_old);
elActive.className = "on";
elActive.className += " " + res;
if(countdown_number > 1){
elOld.className = "off";
}
}
if(countdown_number < 7) {
countdown = setTimeout('countdown_trigger()', 11000);
countdown_number += 1;
}
}
});
}
function countdown_clear() {
clearTimeout(countdown);
}
var getClassname = function(result){
var url = "http://www.domain.de/seite1.php";
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'document';
xhr.onload = function(e) {
doc = this.response;
result(doc.body.className);
};
xhr.send();
}
</script>
</head>
<body onload="countdown_init()"><font face="Arial" size=1>
<div id="A1" class="off" ><font size=6>1</font></div> <br><br>
<div id="A2" class="off" ><font size=6>2</font></div> <br><br>
<div id="A3" class="off" ><font size=6>3</font></div> <br><br>
<div id="A4" class="off" ><font size=6>4</font></div> <br><br>
<div id="A5" class="off" ><font size=6>5</font></div> <br><br>
<div id="A6" class="off" ><font size=6>6</font></div> <br><br>
</font>
</body>
</html>Zitat von @114757:
>
> <html>
> <head>
> <title>Countdown</title>
>
> <style type="text/css">
>
> div.on {
> text-align:center;
> background:#0FF;
> border:1px solid #0AA;
> width:35px;
> height:35px;
> -webkit-border-radius:15px;
> -moz-border-radius:35px;
> border-radius:15px;
> font-family:arial;
> color:#0AA;
> }
>
> div.off {
> text-align:center;
> background:#FFF;
> border:1px solid #0AA;
> width:35px;
> height:35px;
> -webkit-border-radius:15px;
> -moz-border-radius:15px;
> border-radius:15px;
> font-family:arial;
> color:#CCC;
> }
> .red{background-color:red !important}
> .green{background-color:green !important}
> .yellow{background-color:yellow !important}
> </style>
>
> <script language="Javascript">
> var countdown;
> var countdown_number;
> var countdown_number_zwei
> var countdown_number_element;
> var countdown_number_old;
>
> function countdown_init() {
> countdown_number = 1;
> countdown_trigger();
> }
>
> function countdown_trigger() {
> getClassname(function(res){
> if (res.match(/red|green|yellow/i)){
> if(countdown_number < 7) {
> countdown_number_old = "A" + ( countdown_number - 1 );
> countdown_number_element = "A" + countdown_number;
> var elActive = document.getElementById(countdown_number_element);
> var elOld = document.getElementById(countdown_number_old);
> elActive.className = "on";
> elActive.className += " " + res;
> if(countdown_number > 1){
> elOld.className = "off";
> }
> }
> if(countdown_number < 7) {
> countdown = setTimeout('countdown_trigger()', 11000);
> countdown_number += 1;
> }
> }
> });
>
> }
>
> function countdown_clear() {
> clearTimeout(countdown);
> }
>
> var getClassname = function(result){
> var url = "http://www.domain.de/seite1.php";
> var xhr = new XMLHttpRequest();
> xhr.open('GET',url);
> xhr.responseType = 'document';
> xhr.onload = function(e) {
> doc = this.response;
> result(doc.body.className);
> };
> xhr.send();
> }
> </script>
>
> </head>
> <body onload="countdown_init()"><font face="Arial" size=1>
> <div id="A1" class="off" ><font size=6>1</font></div> <br><br>
> <div id="A2" class="off" ><font size=6>2</font></div> <br><br>
> <div id="A3" class="off" ><font size=6>3</font></div> <br><br>
> <div id="A4" class="off" ><font size=6>4</font></div> <br><br>
> <div id="A5" class="off" ><font size=6>5</font></div> <br><br>
> <div id="A6" class="off" ><font size=6>6</font></div> <br><br>
> </font>
> </body>
> </html>
> Woow, das ging schnell und klappt sogar, vielen vielen Dank!!
Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
A1 = Seite1
A2 = Seite2
A3 = Seite3
A4 = Seite4 welches aber nicht kontroliert werden soll und den class = on erhalten soll.
usw.?
Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!Lern mal Javascript ...
Zitat von @114757:
> Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!
Lern mal Javascript ...
> Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!
Lern mal Javascript ...
Stimmt auch wieder, also ich versuch selber.
Vielen dank für deine Hilfe!!
Gruss
Hallo zusammen
Ich habe einbisschen rumgeschaut und gesucht und konnte leider kein passendes Beispiel Script finden welches mir weiter hilft. Es ist ja nicht so als ob ich keine Vorarbeiten geleistet habe ich habe den falschen Weg genommen..
Es wäre toll wenn mir jemand beim Anpassen des Scripts helfen kann, da ich ja auch was lernen will wäre es toll um eine kleine Erklärung.
Gruss und vielen Dank
Ich habe einbisschen rumgeschaut und gesucht und konnte leider kein passendes Beispiel Script finden welches mir weiter hilft. Es ist ja nicht so als ob ich keine Vorarbeiten geleistet habe ich habe den falschen Weg genommen..
Es wäre toll wenn mir jemand beim Anpassen des Scripts helfen kann, da ich ja auch was lernen will wäre es toll um eine kleine Erklärung.
Gruss und vielen Dank
Hallo zusammen
Also ich habe schon etwas geschaft jedoch brauche ich einen kleinen Rat.
Hier ist mein Code, mehrere URL's können eingebunden werden, jedoch bringe ich das mit den Farben nicht zu stande. Es würde auch schon genügen wenn bei (Zeile 100 - 102):
Statt className = "off" die Klasse übernimmt welches vorhin schon verwendet wurde z.B. "green"
Hat mir jemand einen Rat?
Also ich habe schon etwas geschaft jedoch brauche ich einen kleinen Rat.
<html>
<head>
<title>Allgemeine Elemente formatieren mit CSS</title>
<style type="text/css">
/* Für Countdown */
div.on {
text-align:center;
background:#0FF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
color:#0AA;
}
div.off {
text-align:center;
background:#FFF;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
font-family:arial;
color:#CCC;
}
/* Für Big Brother */
.red {
text-align:center;
background-color: red;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
}
.yellow {
text-align:center;
background-color: yellow;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
}
.green {
text-align:center;
background-color: green;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
}
.purple {
text-align:center;
background-color: purple;
border:1px solid #0AA;
width:35px;
height:35px;
-webkit-border-radius:15px;
-moz-border-radius:35px;
border-radius:15px;
font-family:arial;
}
</style>
<!-- Countdown -->
<script language="Javascript">
var countdown;
var countdown_number;
var countdown_number_zwei
var countdown_number_element;
var countdown_number_old;
function countdown_init() {
countdown_number = 1;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number < 7) {
countdown_number_old = "A" + ( countdown_number - 1 );
countdown_number_element = "A" + countdown_number;
document.getElementById(countdown_number_element).className = "on";
if(countdown_number >1){
document.getElementById(countdown_number_old).className = "off";
}
if(countdown_number < 7) {
countdown = setTimeout('countdown_trigger()', 11000);
countdown_number = countdown_number + 1;
}
}
}
function countdown_clear() {
clearTimeout(countdown);
}
</script>
<!-- Big Brother -->
<script type="text/javascript">
function checkClassA1(){
var url = "URL1";
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'document';
xhr.onload = function(e) {
var doc = this.response;
if (doc.body.className.match(/red/i)){
document.getElementById("A1").className = "red";
}
if (doc.body.className.match(/yellow/i)){
document.getElementById("A1").className = "yellow";
}
if (doc.body.className.match(/green/i)){
document.getElementById("A1").className = "green";
}
if (doc.body.className.match(/purple/i)){
document.getElementById("A1").className = "purple";
}
};
xhr.send();
}
function checkClassA2(){
var url = "URL2";
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'document';
xhr.onload = function(e) {
var doc = this.response;
if (doc.body.className.match(/red/i)){
document.getElementById("A2").className = "red";
}
if (doc.body.className.match(/yellow/i)){
document.getElementById("A2").className = "yellow";
}
if (doc.body.className.match(/green/i)){
document.getElementById("A2").className = "green";
}
if (doc.body.className.match(/purple/i)){
document.getElementById("A2").className = "purple";
}
};
xhr.send();
}
function checkClassA3(){
var url = "URL3";
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'document';
xhr.onload = function(e) {
var doc = this.response;
if (doc.body.className.match(/red/i)){
document.getElementById("A3").className = "red";
}
if (doc.body.className.match(/yellow/i)){
document.getElementById("A3").className = "yellow";
}
if (doc.body.className.match(/green/i)){
document.getElementById("A3").className = "green";
}
if (doc.body.className.match(/purple/i)){
document.getElementById("A3").className = "purple";
}
};
xhr.send();
}
function checkClassA4(){
var url = "URL4";
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'document';
xhr.onload = function(e) {
var doc = this.response;
if (doc.body.className.match(/red/i)){
document.getElementById("A4").className = "red";
}
if (doc.body.className.match(/yellow/i)){
document.getElementById("A4").className = "yellow";
}
if (doc.body.className.match(/green/i)){
document.getElementById("A4").className = "green";
}
if (doc.body.className.match(/purple/i)){
document.getElementById("A4").className = "purple";
}
};
xhr.send();
}
</script>
</head>
<body onload="countdown_init();checkClassA1();checkClassA2();checkClassA3();checkClassA4()"><font face="Arial" size=1>
<div id="A1" class="off" ><font size=6>1</font></div><font size=4><br><br></font>
<div id="A2" class="off" ><font size=6>2</font></div><font size=4><br><br></font>
<div id="A3" class="off" ><font size=6>3</font></div><font size=4><br><br></font>
<div id="A4" class="off" ><font size=6>4</font></div><font size=4> <br><br></font>
<div id="A5" class="off" ><font size=6>5</font></div><font size=4><br><br></font>
<div id="A6" class="off" ><font size=6>6</font></div><font size=4><br><br></font>
<!--
<div id="A7" class="off" ><font size=6>7</font></div> <br><br>
<div id="A8" class="off" ><font size=6>8</font></div> <br><br>
<div id="A9" class="off" ><font size=6>9</font></div> <br><br>
-->
</font>
</body>
</html>Hier ist mein Code, mehrere URL's können eingebunden werden, jedoch bringe ich das mit den Farben nicht zu stande. Es würde auch schon genügen wenn bei (Zeile 100 - 102):
document.getElementById(countdown_number_element).className = "on";
if(countdown_number >1){
document.getElementById(countdown_number_old).className = "off"; Hat mir jemand einen Rat?
