113805
113805
19.02.2015, aktualisiert am 02.03.2015
view3002
view16
0
Goto Top

Javascript: Body class auslesen und dann eine Box färben

gelöstFrageJavaScriptEntwicklung
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.

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=" ">
anpasst.
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.

Ist das möglich?
Ich habe da ein Anfang aber komme jedoch nicht weiter:
if( document.body.className.match('red') ){   

}
ShareTeilen
Auf Facebook teilen Auf Twitter teilen Auf Reddit teilen Auf Linkedin teilen

Content-ID: 263926

Url: https://administrator.de/contentid/263926

Ausgedruckt am: 22.11.2024 um 02:11 Uhr

16 Kommentare
Neuester Kommentar
Goto Top
s7mahess
s7mahess 19.02.2015 um 14:04:14 Uhr
Goto Top
Versuch mal deine Formulierung anzupassen, ich wüsste jetzt viele Lösungen, aber ich verstehe die Frage nicht (nach 3 maligen lesen).
113805
113805 19.02.2015 um 15:57:02 Uhr
Goto Top
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).

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
114757
Lösung 114757 19.02.2015, aktualisiert am 26.02.2015 um 11:05:59 Uhr
Goto Top
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>
Gruß jodel32
heart1
113805
113805 26.02.2015 aktualisiert um 09:05:36 Uhr
Goto Top
Zitat 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...
> <!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>
>
Gruß jodel32

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.. ^^
114757
Lösung 114757 26.02.2015 aktualisiert um 11:05:55 Uhr
Goto Top
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: *');  
?>
Dann klappt das 100% face-wink Im Link steht das ebenfalls ...

Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:

7cb4107c3e6b87d8ac2a9e2cb125d6bc

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
113805
113805 26.02.2015 um 09:39:16 Uhr
Goto Top
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:
> <?php
>     header('Access-Control-Allow-Origin: *');  
> ?>
>
Dann klappt das 100% face-wink Im Link steht das ebenfalls ...

Eine Antwort von Seite 1 auf eine Anfragte sollte dann im Header so aussehen:

7cb4107c3e6b87d8ac2a9e2cb125d6bc

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?
114757
Lösung 114757 26.02.2015 aktualisiert um 11:05:51 Uhr
Goto Top
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.
113805
113805 26.02.2015 aktualisiert um 09:59:10 Uhr
Goto Top
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.

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?
114757
Lösung 114757 26.02.2015 aktualisiert um 11:05:46 Uhr
Goto Top
               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";	  
		}
113805
113805 26.02.2015 um 10:00:56 Uhr
Goto Top
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! face-smile
114757
Lösung 114757 26.02.2015 aktualisiert um 11:05:42 Uhr
Goto Top
 
<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>
113805
113805 26.02.2015 aktualisiert um 10:47:59 Uhr
Goto Top
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.?
114757
Lösung 114757 26.02.2015 aktualisiert um 11:05:38 Uhr
Goto Top
Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!
Lern mal Javascript ... face-sad
113805
113805 26.02.2015 um 11:05:22 Uhr
Goto Top
Zitat von @114757:

> Wie sieht es aus wenn ich jetzt mehrere Seiten habe z.B.
Ist das hier ein Wunschkonzert ??!
Lern mal Javascript ... face-sad

Stimmt auch wieder, also ich versuch selber.
Vielen dank für deine Hilfe!!

Gruss
113805
113805 02.03.2015 um 09:01:01 Uhr
Goto Top
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
113805
113805 05.03.2015 aktualisiert um 10:31:02 Uhr
Goto Top
Hallo zusammen

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";
Statt className = "off" die Klasse übernimmt welches vorhin schon verwendet wurde z.B. "green"

Hat mir jemand einen Rat?
gelöstFrageJavaScriptEntwicklung
Heiß diskutiert
superfun2k24Sophos SFOS 20 DNAT funktioniert nichtsuperfun2k24 - 26 Kommentareuser217Kaufberatung Hardware - Hyper-V Cluster 3 Nodesuser217 - 25 KommentarePharaunIntel-E810 QSFP28 to Mikrotik QSPF+ mit 40Gbit VerbindungPharaun - 23 KommentarecseLaufwege erfassen in großer Hallecse - 20 Kommentareprplemk2Testumgebung bauen (Grundlegend)prplemk2 - 19 KommentareaufdemmarsHP Z620 USB hat kein Strom beim Startenaufdemmars - 17 KommentareYan2021Nachricht an mehrere PCs im Netzwerk sendenYan2021 - 17 KommentareTJ.Hooker74Dom.Admin-Passwort ändern - Auswirkungen auf EX, HCW, AADCTJ.Hooker74 - 14 KommentareJudgelgZertifikate in die Exchange Online GAL hochladenJudgelg - 13 KommentareadmtechEntwicklertagebuch: Release 6.4 - Filteradmtech - 13 KommentaremaisenkaiserSwitch ohne STP ins Netzwerkmaisenkaiser - 13 KommentareleberkaeseFB7590 ISDN Fax-Funktionleberkaese - 12 Kommentare