Wie integriert man ein Widget in eine HTML Seite?

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/wie-integriert-man-ein-widget-in-eine-html-seite_256219/page_1 - zur Vollversion wechseln!

noir schrieb am 15.08.2020 um 14:42

Hallo,

Ich hab von Web Entwicklung nicht wirklich Ahnung aber sollte es nicht einfach möglich sein
ein .html File zu erstellen, seinen "Code" rein packen und es via Browser auf zu machen
und dann sollte z.b. ein Javascript auch laufen

genauer gesagt geht es mir hier jetzt um ein Open Weather Map Widget das ich gerne in meine Visualisierung einbinden möchte
den Code für das Widget bekommt man direkt von der Seite https://openweathermap.org
man muss dort dann nur einen Kostenlosen Account erstellen damit man eine ID / Key für die API bekommt

Ich hätte es jetzt mal mit einem .html File versucht das so aussieht
Leider tut sich hier garnichts und ich kann es mir nicht wirklich erklären wieso

Code:

<!DOCTYPE html>
<html>
<body>

<h1>Open Weather Map Widget Test</h1>

<div id="openweathermap-widget-15"></div>

<script>window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];  
window.myWidgetParam.push({
		id: 15,
		cityid: '7871965',
		appid: 'xxxxxxxx',
		units: 'metric',
		containerid: 'openweathermap-widget-15',  
		});  
(function() {
	var script = document.createElement('script');
	script.async = true;
	script.charset = "utf-8";
	script.src = "https://openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(script, s);  
	})();
</script>

</body>
</html>

Neo1010 schrieb am 15.08.2020 um 15:21

du darfst nicht einfach das .html öffnen mit dem Browser sondern müsstest es mit einem Webserver laufen lassen:

Ohne Webserver, findet er die Files nicht bzw. sucht falsch:

Mit Webserver passt der Pfad:

noir schrieb am 15.08.2020 um 15:52

Ah ok Danke

Irgendwelche Möglichkeiten so etwas Lokal zu testen gibt es nicht oder?

Viper780 schrieb am 15.08.2020 um 16:10

Lokal einen Webserver starten und auf localhost aufrufen

Gegi schrieb am 15.08.2020 um 16:12

Zitat aus einem Post von noir
Ah ok Danke

Irgendwelche Möglichkeiten so etwas Lokal zu testen gibt es nicht oder?

Du brauchst eben einen lokalen webserver auf deiner maschine. Da gibt's ca. eine Million Optionen... Welches OS hast du?

Barokai schrieb am 15.08.2020 um 16:51

VS code als editor mit live server extension wär eine möglichkeit, sollte auch halbwegs platformunabhängig sein https://marketplace.visualstudio.co...kdey.LiveServer

noir schrieb am 15.08.2020 um 17:13

Ich probier das mit Visual Studio mal
zur Not setze ich mir einen Raspberry Webserver auf

Danke

Vinci schrieb am 15.08.2020 um 17:24

Code: PY

python -m http.server

Im selben Ordner ausführen, simpler wirds nicht mehr.

https://docs.python.org/3/library/http.server.html