Frage Wie muss der Link gestaltet sein?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

newcomer

Mitglied
31 Oktober 2010
93
0
6
Hallo und guten Abend,

ich möchte gerne den folgenden Link als iframe in meine Homepag einbinden.

Es geht mir um die rot markierte Passage:

https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/MaximumTemperature_20190130_DL_de_mini.gif

Jeden Tag bekommt der Link ein neues Datum.

Wie kann ich das umgehen, damit jeden Tag das aktuelle Bild angezeigt wird?

Das muss irgendwie mit dem Wort "current" gehen.

Wäre super, wenn mir jemand behilflich sein könnte.

Vielen Dank.

LG

Volker
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Das geht mit den Funktionen des Date-Objektes:
Code:
<iframe id="die-id"></iframe>
<script>
        function formatNr(nr) {
            return ('0' + nr).substr(-2);
        }
        var now = new Date();
        var date = now.getFullYear() + formatNr(now.getDate()) + formatNr(now.getMonth() + 1);
        var url = 'https://www.wetteronline.de/?req=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/MaximumTemperature_'
            + date + '_DL_de_mini.gif';


    document.getElementById("die-id").src = url;
Oder auch mit PHP.
 

newcomer

Mitglied
31 Oktober 2010
93
0
6
Hallo,

vielen Dank.

Leider funktioniert das aber nicht.

Ich habe alles kopiert und an die entsprechende Stelle auf meiner HP eingefügt.

Es wird leider nur ein leerer Rahmen eingezeigt.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Ups, da habe ich Tag und Monat vertauscht. Dieses sollte funktionieren:
Code:
    <iframe id="die-id"></iframe>
    <script>
        function formatNr(nr) {
            return ('0' + nr).substr(-2);
        }
        var now = new Date();
        // hier war der Fehler:
        var date = now.getFullYear() + formatNr(now.getMonth() + 1) + formatNr(now.getDate());
        var url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/MaximumTemperature_'
            + date + '_DL_de_mini.gif';
        console.log(date, url);
        document.getElementById("die-id").src = url;
    </script>
Außerdem hatte ich vergessen, das schließende </script> zu posten.
 

newcomer

Mitglied
31 Oktober 2010
93
0
6

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Möchtest Du, dass das Bild zyklisch, z. B. alle 10 Sekunden aktualisiert wird? Das kannst Du so erreichen:
JavaScript:
    </script>
        function formatNr(nr) {
            return ('0' + nr).substr(-2);
        }
        var now = new Date();
       var date = now.getFullYear() + formatNr(now.getMonth() + 1) + formatNr(now.getDate());
        var url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/PrecipitationAmount24h_'
            + date + '_DL_de_mini.gif&time=' + Date.now();
        console.log(date, url);
        function aktualisiere() {
            document.getElementById("die-id").src = url;
        }
        aktualisiere();
        setInterval(aktualisiere, 10000);
    </script>
Mir ist aufgefallen, dass das keine HTML-Seite ist, sondern ein GIF-Bild. Daher brauchst Du gar keinen iFrame sondern kannst es mit einem img-Tag anzeigen:
HTML:
    <img id="die-id">
Dann erübrigt sich auch das Problem mit dem Rahmen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Bittesehr:
Code:
    <img id="hoechsttemp">
    <img id="tiefsttemp">
    <img id="niederschlag">
    <img id="schneefall">
    <img id="wind">
    <script>
        function formatNr(nr) {
            return ('0' + nr).substr(-2);
        }
        function aktualisiere() {
            var now = new Date();
            var date = now.getFullYear() + formatNr(now.getMonth() + 1) + formatNr(now.getDate());
            var url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/MaximumTemperature_'
                + date + '_DL_de_mini.gif&time=' + Date.now();
            document.getElementById("hoechsttemp").src = url;
            url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/MinimumTemperature_'
                + date + '_DL_de_mini.gif&time=' + Date.now();
            document.getElementById("tiefsttemp").src = url;
            url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/PrecipitationAmount24h_'
                + date + '_DL_de_mini.gif&time=' + Date.now();
            document.getElementById("niederschlag").src = url;
            url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/ProbabilityOfSnowfall_'
                + date + '_DL_de_mini.gif&time=' + Date.now();
            document.getElementById("schneefall").src = url;
            url = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/WindGust_'
                + date + '_DL_de_mini.gif&time=' + Date.now();
            document.getElementById("wind").src = url;
        }
        aktualisiere();
        setInterval(aktualisiere, 10000);
    </script>
Ich hatte vermutet, dass Du diese Wetterseite selber gebaut hast, daher wundert es mich, dass Du den Code nicht selbständig erweitern kannst?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Der Grund, warum die Grafik nicht aktualisiert wurde, ist, dass wetteronline schon auf den 4.2. umgeschaltet hat, obwohl Mitternacht noch gar nicht vorbei ist. Um das abzufangen, müsste man auch die URL für den nächsten Tag prüfen, ob sie verfügbar ist. Dann wird das Skript ein wenig komplizierter. Vielleicht finde ich morgen Zeit, es zu erweitern.

Das Intervall wird in Millisekunden angegeben, d. h. 10000 bedeutet 10 Sekunden. Das ist wahrscheinlich sehr kurz bemessen, denn so schnell ändert sich ja solch eine Wetterkarte nicht.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Dies sollte funktionieren:
Code:
    <script>
        var urlTemplate = 'https://www.wetteronline.de/?ireq=true&pid=p_city_colormap&src=city/vermarktung/wom/graphiken/farbkarten/thumbnails/{namegrafik}_{datestr}_DL_de_mini.gif&time={time}';
        function formatNr(nr) {
            return ('0' + nr).substr(-2);
        }
        function startUpdate(id, dateStr, dateStrTomorrow, nameGrafik, timeStamp) {

            // URLs fuer heute und morgen bereit stellen
            var url = urlTemplate.replace('{datestr}', dateStr)
                .replace('{namegrafik}', nameGrafik)
                .replace('{time}', timeStamp);
            var urlTomorrow = urlTemplate.replace('{datestr}', dateStrTomorrow)
                .replace('{namegrafik}', nameGrafik)
                .replace('{time}', timeStamp);

            // Hilfsimage um zu testen, ob die Grafik fuer morgen existiert
            var imgHelp = new Image();

            // Sichtbares img-Element
            var img = document.getElementById(id);

            imgHelp.onload = function () {
                // Existiert die Grafik noch nicht, wird ein Bild von 1px x 1px übertragen
                if (this.width > 1) {
                    // Die Grafik fuer morgen existiert: Deren URL in img-Element eintragen
                    img.src = urlTomorrow;
                } else {
                    // Die Grafik fuer morgen existiert nicht:
                    // URL der Grafik von heute in img-Element eintragen
                    img.src = url;
                }
            }

            // Laden der Grafik fuer morgen anstossen
            imgHelp.src = urlTomorrow;
        }
        function aktualisiere() {
            var now = new Date();
            var timeStamp = Date.now();
            var dateStr = now.getFullYear() + formatNr(now.getMonth() + 1) + formatNr(now.getDate());
            var dateStrTomorrow = now.getFullYear() + formatNr(now.getMonth() + 1) + formatNr(now.getDate() + 1);
            startUpdate('hoechsttemp', dateStr, dateStrTomorrow, 'MinimumTemperature', timeStamp);
            startUpdate('tiefsttemp', dateStr, dateStrTomorrow, 'MaximumTemperature', timeStamp);
            startUpdate('niederschlag', dateStr, dateStrTomorrow, 'PrecipitationAmount24h', timeStamp);
            startUpdate('schneefall', dateStr, dateStrTomorrow, 'ProbabilityOfSnowfall', timeStamp);
            startUpdate('wind', dateStr, dateStrTomorrow, 'WindGust', timeStamp);
        }
        aktualisiere();
        setInterval(aktualisiere, 10000);
    </script>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Sieht so aus, als ob jetzt alles OK sei. Das Blitzen bei der Aktualisierung stört etwas, aber ich würde ohnehin empfehlen, das Intervall stark zu vergrößern.
 

newcomer

Mitglied
31 Oktober 2010
93
0
6
Herzlichen Dank!! Spitze!!

Könntest Du mir bitte in Rot die Stelle markieren, wo ich einen Link einfügen kann? Wenn ich auf die Grafik klicke, soll eine neue Seite aufgehen.

LG

Volker
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Einfach ein a-href-Tag mit dem Linkziel um das img-Tag legen:
<a href="dein-linkziell.html"><img id="tiefsttemp"></a>