verschiedene Dynamische Bildergebnisse aus fremder Webseite zusammenstellen

boersenfuchs · 3. Februar 2021

Hallo Community,

bitte nicht den Zweck oder die rechtliche Seite meines Vorhabens hinterfragen, sondern auf die technische Machbarkeit eingehen.

Auf diversen Börsenetien wir z.B. Onvista.de gibt es Chartabbildungen von Wertpapieren, die sich täglich ändern.

Diese Charts werden zwar als Bild dargestellt, daß wir Menschen es sehen können. aber es ist technisch kein Bild (sonst wäre mein Vorhaben einfach!)

Beispiel hier Adidas: https://www.onvista.de/aktien/Adidas-Aktie-DE000A1EWWW0

Nun möchte ich mir PRIVAT eine HTML Seite bauen, auf der ich z.B. alle DAX Akien als Chartbild einbaue (z.B. alle untereinander) - Name drüber und fertig.

Warum? Weil es eine solche Übersicht nicht gibt. Wenn es mich interessiert, wie sich alle 30 DAX Aktien optisch entwickelt haben, muß ich alle 30 einzeln aufrufen und mir ansehen. Wenn ich alle auf einmal auf einer Site hätte, wäre das viel einfacher. Ich bräuchte nur meine html Seite auf meinem Computer aufrufen und die Grafiken sollten dann den aktuellen Stand anzeigen.

Aber ich weiß nicht ob oder wie man so etwas umstezen müßte. Mit iframe theoretisch machbar, aber meine Erfahrung hat gezeigt, daß sich die Positionen auf der Abrufseite ändern können und dann muß man das immer wieder nachjustieren.

jonas3344 · 3. Februar 2021

Glaube nicht, dass es da eine gute und legale Möglichkeit gibt.

Es gibt doch aber sicher Dienstleister, welche so was anbieten, nicht? Und sonst gibt es sicher auch eine API welche Dir die Daten liefert so dass du Dir die Charts selbst zusammenbauen kannst.

AndreasB · 3. Februar 2021

Zitat von jonas3344

eine API welche Dir die Daten liefert so dass du Dir die Charts selbst zusammenbauen kannst.

Das wäre jetzt auch meine Idee.

Such dir eine API, die dir die gewünschten Daten liefer und stelle sie mit D3.js oder ähnlichem dar.

MrMurphy · 8. Februar 2021

Der TE lehnt iFrame-Lösungen zwar ab, aber ich denke dass Andere daran vielleicht Interesse haben. Meiner Erfahrung nach ändern sich sich Seiten wie die der Börsenkurse nur höchst selten. Mit iFrames kommt man zudem schnell zu einem Ergebnis und es lassen sich bei Bedarf mit nur wenigen Änderungen auch andere in sich gleicharte Infoseiten einbinden, die man sonst vielleicht regelmäßig nacheinander anklickt.

Meine Lösung dazu sieht folgendermaßen aus:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Börsenkurse - www.onvista.de</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Weiterleitung -->
   <!-- <meta http-equiv="refresh" content="0; URL=name.html"> -->

   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->

   <style>

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);


   /*Basisangaben*/
   @media all {
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      body {
         margin: 1rem 1rem 1rem 1rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0px;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: darkseagreen;
         padding: 1rem 2rem;
         border-radius: 0.5rem;
         margin-bottom: 2rem;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   /*.kurse*/
   @media all {
      .kurse {
         max-width: 1300px;
         margin-left: auto;
         margin-right: auto;
      }
      .kurse section {
         background-color: lightgreen;
         width: 600px;
         padding: 1rem;
         border: 2px solid grey;
         border-radius: 0.5rem;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 1rem;
      }
      .kurse section h2 {
         margin-bottom: 1rem;
      }
      .kurse section div {
         position: relative;
         overflow: hidden;
         width: 600px;
         height: 630px;
      }
      .kurse section p {
         text-align: right;
      }
      .kurse section p a {
         padding: 0.5rem 1rem;
         border: 1px solid #008fd1;
         border-radius: 0.5rem;
         margin: 0.5rem 1rem;
      }
      .kurse section p a,
      .kurse section p a:link,
      .kurse section p a:visited {
         background-color: white;
      }
      .kurse section p a:hover,
      .kurse section p a:focus,
      .kurse section p a:active {
         background-color: #008fd1;
         color: white;
      }
      .kurse iframe {
         position: absolute;
         top: -880px;
         width: 700px;
         height: 1490px;
      }
   }
   @media only screen and (min-width: 1400px) {
      .kurse {
         display: grid;
         gap: 1rem;
         grid-template-columns: repeat(auto-fit, minmax(630px, 1fr));
      }
      .kurse section {
         margin-left: 0.5rem;
         margin-right: 0.5rem;
      }
      .kurse section h2 {
      }
      .kurse section div {
      }
      .kurse iframe {
      }
   }

   /*.hinweis*/
   @media all {
      .hinweis {
         padding: 1rem;
         border: 2px solid grey;
         border-radius: 0.5rem;
         margin: 1rem 0rem;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   /*.pagefooter*/
   @media all {
      .pagefooter {
         background-color: darkseagreen;
         padding: 1rem 2rem;
         border-radius: 0.5rem;
         margin-top: 2rem;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Börsenkurse - www.onvista.de</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <article class="kurse">
         <section>
            <h2>Adidas</h2>
            <div>
               <iframe src="https://www.onvista.de/aktien/Adidas-Aktie-DE000A1EWWW0" frameborder="0" scrolling="no"></iframe>
            </div>
            <p><a target="_blank" href="https://www.onvista.de/aktien/Adidas-Aktie-DE000A1EWWW0">Originalseite</a></p>
         </section>
         <section>
            <h2>Amazon</h2>
            <div>
               <iframe src="https://www.onvista.de/aktien/Amazon-Aktie-US0231351067" frameborder="0" scrolling="no"></iframe>
            </div>
            <p><a target="_blank" href="https://www.onvista.de/aktien/Amazon-Aktie-US0231351067">Originalseite</a></p>
         </section>
         <section>
            <h2>Daimler</h2>
            <div>
               <iframe src="https://www.onvista.de/aktien/Daimler-Aktie-DE0007100000" frameborder="0" scrolling="no"></iframe>
            </div>
            <p><a target="_blank" href="https://www.onvista.de/aktien/Daimler-Aktie-DE0007100000">Originalseite</a></p>
         </section>
         <section>
            <h2>Luckin-Coffee</h2>
            <div>
               <iframe src="https://www.onvista.de/aktien/LUCKIN-COFFEE-Aktie-US54951L1098" frameborder="0" scrolling="no"></iframe>
            </div>
            <p><a target="_blank" href="https://www.onvista.de/aktien/LUCKIN-COFFEE-Aktie-US54951L1098">Originalseite</a></p>
         </section>
         <section>
            <h2>Volkswagen</h2>
            <div>
               <iframe src="https://www.onvista.de/aktien/Volkswagen-VZ-Aktie-DE0007664039" frameborder="0" scrolling="no"></iframe>
            </div>
            <p><a target="_blank" href="https://www.onvista.de/aktien/Volkswagen-VZ-Aktie-DE0007664039">Originalseite</a></p>
         </section>
      </article>
      <aside class="hinweis">
         <p>Der TE will zwar keine iFrame-Lösung, aber ich denke das Andere daran durchaus Interesse haben. Oder einfach ein Beispiel wünschen, wie in iFrames nur ein bestimmter Ausschnitt der verlinkten Seite angezeigt werden kann.</p>
         <p>Zudem wird das Layout solcher verlinkter Seiten nur relativ selten geändert. Falls es mal nur geringe Änderungen geben sollte müssen im CSS nur wenige Werte angepasst werden.</p>
         <p>Der angezeigte Zeitraum (Intraday, 5 Tage, ...) kann  direkt im iFrame gewechselt werden. Welche weiteren Informtionen (zum Beispiel die Anzeige des Graphen) problemlos aufgerufen werden können kann jeder selbst ausprobieren.</p>
         <p>Um weitere Informationen zu erhalten kann mit einem Klick auf den Button "Originalseite" direkt auf die verlinkte Seite gewechselt werden.</p>
         <p>Da es einige Zeit dauern kann bis die verlinkten Seiten geladen sind, öffnen  sich die verlinkten Seiten in einem neuen Tab, sofern die Browser das unterstützen. So muss die Hauptseite nicht jedesmal neu geladen werden.</p>
      </aside>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/9751-verschiedene-dynamische-bildergebnisse-aus-fremder-webseite-zusammenstellen/">https://www.html-seminar.de/</a></p>
      <p>Die Börsenkurse stammen von der Seite <a href="https://www.onvista.de/" target="_blank">https://www.onvista.de/</a>.</p>
   </footer>
</body>
</html>

Alles anzeigen

Das CSS basiert auf meiner Standardtestseite. Heißt: Sie enthält für diese Lösung auch nicht benötigtes CSS. Durch die Struktur sollte aber klar werden, welches CSS erforderlich ist. Im HTML-Teil sollte auch erkennbar sein, wie die iFrames eingebunden sind und damit auch wie zusätzliche hinzugefügt werden können.

verschiedene Dynamische Bildergebnisse aus fremder Webseite zusammenstellen

Jetzt mitmachen!

Teilen