Öffnen von iframe beim scrollen

rernanded

Erfahrenes Mitglied
Hi
brauche ein Idee wie ich es anstellen könnte mittels iframes Inhalte(von Webseiten) anzeigen zu lassen, aber nur wenn das jeweilige "anzeigende" iframe sich in der Mitte meiner Webseite befindet, so dass sich jedes weitere iframe nur beim Scrollen meiner Webseite öffnet, und sich das darüber befindliche wieder schliesst.
MONI

Hier mal mein Versuch:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>  
    .modal {
      display: none;  
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
}

    .modal-content {
      background-color: #fff;
      margin: 15% auto;

      padding: 20px;
      border: 1px solid #000;
      width: 80%;
}
</style>
</head>
<body onscroll = "myFunction(e)">

<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="link" href="http://www.spiegel.de">spiegel.de</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
         <iframe id="content" height="789px" width="100%"></iframe>
    </div>

</div>

</body>
<script>
myFunction(e) {
    modal.style.display = "block";
    console.log(e);
    document.getElementById("content").src = e.target.href;
  });
</script>
</body>
</html>
 
Wie meinst du das genau ?
Ich habe jetzt mal ein Horizontales Iframe Laufband gemacht als Beispiel.
Wenn man scrollt kommt ein Iframe mit roten Border, sobald es Sichtbar ist wird der Border orange und sobald der Iframe komplett Sichtbar ist grün.
Beim weiter scrollen slidet er nach oben raus und wird wieder orange und rot.
Alle Iframes danach machen das gleichen.

Die Farben sollen das laden der Iframes darstellen.
Wegen den Ladezeiten habe ich srcdoc genommen anstatt src.
Du siehst dann was ich meine.
Da wo ich die unterschiedliche Texte im Iframe anzeige ,
mußt du nur mit src="Link zur Page" deine Seiten laden.

Kuck mal ob du es verstehen tust wie ich es meine

Link zur Lösung
 
Zuletzt bearbeitet:
@basti1012 Hi Basti nicht übel, danke Dir, das Laufband ist übrigens vertikal ;-). Nur wenn ich bei src URLs einsetze gibt es das Problem, dass beim Scrollen die Inhalte verschwinden. Ebenso beim Seite neu laden. Ausserdem kann ich im <style> die Höhe der framebox nicht ändern.
 
Ehm ja.
Das der Inhalt beim Scrollen dann verschwindet ist klar.
Das ist ja ein Scroll Event und sobald man scrollt ( auch nur ein Pixel ) wird in diesen Beispiel das src neu geladen.
Da hatte ich nicht dran gedacht , wollte aber auch nicht alles machen.
In diesen Script müßte man dan Werte angeben wo das das Iframe nicht neu geladen wird.

Beim Seite neuladen ist es ja so als wenn das Script neu geladen wird.Es fängt alles von vorne an.
Wie denkst du dir das den beim Neuladen ?
Wenn man jetzt ganz runterscrollt , sagen wir mal zum letzten Iframe und dann die Seite neugeladen wird, springen die meißten Browser gleich wieder zurück nach unten.
Soll dann der Iframe gleich den Inhalt laden wenn er im Sichtbaren Bereich ist ?
Was anderes kann ich mir jetzt nicht denken was du damit meinen kannst.

Welche höhe der frambox willst du den ändern ?
Den Inhalt des Iframes,oder das Iframe selber ?
Der Iframe selber kann man ganz normal über der Css ändern.
Den Inhalt selber ist was anderes.
 
Okay, 1. Problem erkannt. Das mit dem neu laden muß ich mir erstmal selbst vor Augen führen, ich bin in Sachen js ziemlich unbefleckt.
Das mit dem style und der Höhe ist natürlich ein Problem das nur das iframe selbst betrifft, aber nicht der "Inhalt" geändert werden kann, das ist mir klar. Aber es ist eben nicht möglich das iframe per style/height zu ändern.
 
Das mnit der Iframe größe verstehe ich gerade nicht.
Du mußt in der Css ja nur die height Angabe ändern.
.framebox{ border:2px solid black; margin:120px auto; width:60vw; height:500px; }
Oder in der JS Datei ,da wo der Border Grün wird ,nur das angeben
ele.style.height='500px';

Wenn du aber in der Css zb height:200px angibst , aber in der Js Datei dann style.height='500px'; , wird der Wert aus der Css überschrieben
 
Dass mit dem style / height habe ich schon korrekt gemacht und Du brauchts auch im js keine height-Angaben. Der Fehler liegt darin, dass Du im style / height von body 1500px eingebaut hast. Wenn man die Angabe entfernt klappt alles wunderbar.

Jetzt bleibt nur noch das Problem mit dem neu laden. Ich bin da dran.
 
Zuletzt bearbeitet:
Hier vllt. eine mögliche Lösung wobei ich überfragt bin wie man die am besten einbauen kann:

HTML:
$(window).bind("scrollstart",function(){
    if(scroll_interval){clearInterval(scroll_interval);};
    scroll_interval = setInterval(function(){
      // add Javascript here, it's executed every 10ms as long as the user is scrolling
    },10);
});

$(window).bind("scrollstop",function(){
    clearInterval(scroll_interval);
});
 
Zurück