Börsenkurse
Börsenkurse auf Webseite anzeigen lassen über Iframe
Der hier verwendete Code
<!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(https://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>