Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Zmiana background-color w zależności od szukanego tekstu
Forum PHP.pl > Forum > XML, AJAX
Kargul1000
9.12.2015, 18:33:30
Szanowni forumowicze,

Mam problem, napisałem sobie taka prostą stronkę która pobiera kilka podstron na których mam statusy serwerów. Problem polega na tym że jeśli uzupełnie div szukanymi słowami zmienia mi kolor natomiast nie przeszukuje mi divow w których dane umiesciłem za pomocą javascript.

I teraz pytanie: Jak przeszukać te 3 pierwsze diwy tak zeby zmieniło mi kolor szukanych słów ?

[HTML] pobierz, plaintext 
  1.  
  2. <!doctype html>
  3. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="refresh" content="30">
  7.     <title></title>
  8. 		<style>
  9. 			#czas{
  10. 				color: olivedrab;
  11.     				font-family: monospace;
  12.     				font-size: 29px;
  13.     				text-align: center;
  14. 			}
  15. 			object{
  16.  				width: 100%
  17. 			}
  18. 			#r {
  19.  
  20.     				border-style: dotted;
  21.     				border-width: 2px;
  22.     				float: left;
  23.     				margin: 10px 2px 3px 10px;
  24.     				padding: 5px 0 0 5px;
  25.     				width: auto;
  26.  
  27.  
  28. background: rgba(210,255,82,1);
  29. background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  30. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,255,82,1)), color-stop(100%, rgba(145,232,66,1)));
  31. background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  32. background: -o-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  33. background: -ms-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  34. background: linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
  35. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=0 );
  36.  
  37. 			}
  38.  
  39. 		</style>
  40.  
  41. 	</head>
  42.   <body>
  43. <div id="contener">
  44. <div id="czas"></div>
  45.  
  46. 	<div id="r">
  47. 		serwer1<hr>
  48. 		<div id="siteloader1"></div>
  49. 	</div>
  50. 	<div id="r">
  51. 		serwer2<hr>
  52. 		<div id="siteloader2"></div>
  53. 	</div>
  54. 	<div id="r">
  55. 		serwer3<hr>
  56. 		<div id="siteloader3"></div>
  57. 	</div>
  58. 		<div id="r">
  59. 		INNE<hr>
  60. 		<div id="log">
  61. 			OK
  62. 			Error
  63. 		</div>
  64. 	</div>
  65. </div>
  66.     <script src="jquery-1.7.2.min.js"></script>
  67.     <script>
  68.   // colorowanie
  69.  
  70. 	var lines = $('#log').text().split('\n');
  71. 	$('#log').empty();
  72.  
  73. 	$.each(lines, function () {
  74. 	var $this = $('<div>' + this + '</div>');
  75.  
  76.     	$('#log').append($this);
  77.     		if ($this.text().match('OK')) {
  78.         		$this.css('background-color', 'green');
  79.     		} else if ($this.text().match('Error')) {
  80.         		$this.css('background-color', 'red');
  81.     		}
  82. 	});
  83.  
  84.     //
  85.  
  86. 	$("#siteloader1").html('<object data="https://server1/raport.html"></object>');
  87. 	$("#siteloader2").html('<object data="https://server2/raport.html"></object>');
  88. 	$("#siteloader3").html('<object data="https://server3/raport.html"></object>');
  89. 	//
  90.  
  91.  
  92.     //czas
  93.     var czas = new Date();
  94.     var element = document.getElementById('czas');
  95.     element.innerHTML = "Aktualizacja: " + czas.getHours() + ":" + czas.getMinutes() + ":"+czas.getSeconds() + "";
  96.  
  97. </script>
  98.  
  99.   </body>
  100. </html>
  101.  
[HTML] pobierz, plaintext


Proszę o jakaś podpowiedz.
koodo218
9.12.2015, 19:00:49
Cytat(Kargul1000 @ 9.12.2015, 18:33:30 ) *
I teraz pytanie: Jak przeszukać te 3 pierwsze diwy tak zeby zmieniło mi kolor szukanych słów ?

Zacznij od zamknięcia elementów <object> (ten znacznik ma zamknięcie, u ciebie w kodzie go nie ma), a następnie zrób analogicznie tak jak postępujesz z #log.
Kargul1000
9.12.2015, 19:27:39
O fuck faktycznie biggrin.gif

Cytat(koodo218 @ 9.12.2015, 20:00:49 ) *
...a następnie zrób analogicznie tak jak postępujesz z #log.


Próbowałem postępować analogicznie jak w #log ale nie chce działać. Prubuje przeszukiwać same <object> ale nie działa.

Może trzebaby przechwycić w jakiś sposób zawartość <object> i wypisać jako czysty txt do html questionmark.gif

Jakieś podpowiedzi ?
Comandeer
9.12.2015, 20:17:07
Hm, czemu object, a nie iframe?

Raczej się do zawartości tak wczytanych zasobów nie dostaniesz, bo istnieje tzw. same-origin policy. Dałoby się to obejść przy pomocy Ajax + CORS.
Kargul1000
9.12.2015, 20:25:04
Cytat(Comandeer @ 9.12.2015, 21:17:07 ) *
Hm, czemu object, a nie iframe?

Raczej się do zawartości tak wczytanych zasobów nie dostaniesz, bo istnieje tzw. same-origin policy. Dałoby się to obejść przy pomocy Ajax + CORS.


A może jakiś przykład ? Jak coś takiego zrobić ?
Comandeer
10.12.2015, 00:51:14
http://enable-cors.org oczywiście jeśli nie masz dostępu do configu tamtych serwerów, to powstaje problem.
Kargul1000
10.12.2015, 23:33:27
NIe mam biggrin.gif

Można w jakiś sposób zapisać całą stronę za pomocą js do dajmynato pliku txt ?
Comandeer
11.12.2015, 16:07:06
No właśnie bez CORS nie. Musiałbyś pobierać treść strony po stronie serwera, np. w PHP przy pomocy cURL.
Kargul1000
14.12.2015, 14:08:00
Próbowałem .... też odpada bo połączenie jest ssl trzeba pobrać certyfikat i się zalogować a to dla mnie wyższa szkoła jazdy biggrin.gif aa i zalezy mi na tym żeby taką prostą stronkę w html-u odpalić sobie lokalnie na kompie.

Czyli nikt nie ma jakiegoś pomysłu ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.