Wie integriert man ein Widget in eine HTML Seite?

noir

Overclocking Team Member

Registered: Dec 2007
Location: Salzburg/OÖ
Posts: 2314

15.08.2020 - 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

.

Registered: May 2003
Location: -
Posts: 1212

15.08.2020 - 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

Overclocking Team Member

Registered: Dec 2007
Location: Salzburg/OÖ
Posts: 2314

15.08.2020 - 15:52

Ah ok Danke

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

Bearbeitet von noir am 15.08.2020, 16:07

Viper780

Elder
Er ist tot, Jim!

Registered: Mar 2001
Location: Wien
Posts: 51878

15.08.2020 - 16:10

Lokal einen Webserver starten und auf localhost aufrufen

Gegi

Here to stay

Registered: Jan 2001
Location: Wien
Posts: 798

15.08.2020 - 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

Big d00d

Registered: Sep 2012
Location: Mühl4tel - PE
Posts: 291

15.08.2020 - 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

Overclocking Team Member

Registered: Dec 2007
Location: Salzburg/OÖ
Posts: 2314

15.08.2020 - 17:13

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

Danke

Vinci

hatin' on summer

Registered: Jan 2003
Location: Wien
Posts: 5891

15.08.2020 - 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

noir Overclocking Team Member Registered: Dec 2007 Location: Salzburg/OÖ Posts: 2314	15.08.2020 - 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 . Registered: May 2003 Location: - Posts: 1212	15.08.2020 - 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 Overclocking Team Member Registered: Dec 2007 Location: Salzburg/OÖ Posts: 2314	15.08.2020 - 15:52 Ah ok Danke Irgendwelche Möglichkeiten so etwas Lokal zu testen gibt es nicht oder? Bearbeitet von noir am 15.08.2020, 16:07
Viper780 Elder Er ist tot, Jim! Registered: Mar 2001 Location: Wien Posts: 51878	15.08.2020 - 16:10 Lokal einen Webserver starten und auf localhost aufrufen
Gegi Here to stay Registered: Jan 2001 Location: Wien Posts: 798	15.08.2020 - 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 Big d00d Registered: Sep 2012 Location: Mühl4tel - PE Posts: 291	15.08.2020 - 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 Overclocking Team Member Registered: Dec 2007 Location: Salzburg/OÖ Posts: 2314	15.08.2020 - 17:13 Ich probier das mit Visual Studio mal zur Not setze ich mir einen Raspberry Webserver auf Danke
Vinci hatin' on summer Registered: Jan 2003 Location: Wien Posts: 5891	15.08.2020 - 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

Wie integriert man ein Widget in eine HTML Seite?

Forum Index > Software > Coding Stuff

noir

Neo1010

noir

Viper780

Gegi

Barokai

noir

Vinci