JS - Scrollfunktion auf iFrame umbiegen

Hallo zusammen,
ich möchte gerne beim herunterscrollen eine CSS Klasse tauschen. Das funktioniert soweit auch.
Was muss ich denn nun machen damit das Ganze aus einem iFrame heraus funktioniert ? Dem
iFrame habe ich die id "Fenster" gegeben, wie muss ich die nun im Javascriptcode einbinden ?
Kann man überhaupt den Scroll eines iFrames überwachen bzw abgreifen ?
Grüße Ingo

Hier der bisherige Code JS.Code

<script type="text/javascript">  

    $(window).load(function(){
      
$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 10) {

                                   $('#ident1').removeClass('Element1');  
                                   $('#ident1').addClass('Element2');  

        } else {

                                   $('#ident1').removeClass('Element2');  
                                   $('#ident1').addClass('Element1');  
 
        }
    });
    });
    });

</script>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 379289

Url: https://administrator.de/forum/js-scrollfunktion-auf-iframe-umbiegen-379289.html

Ausgedruckt am: 16.02.2025 um 19:02 Uhr

6 Kommentare

Neuester Kommentar

Du musst das Scrollevent vom contentDocument des iFrames subscriben, ein iframe selbst hat kein scroll event.

document.getElementById('fenster').contentDocument.addEventListener('scroll', function(){  
    alert('iframe is scrolling')  
}, false);

Und natürlich die same origin policy bei iFrames beachten. Die Seite des iFrames muss also entweder auf der selben Domain liegen oder sie muss Cross Site Scripting explizit per CORS-Header erlauben damit das funktionieren kann.

Die "same origin policy" ist kein Problem, da ich nur eine Unterseite anzeigen möchte keine fremde Seite.
Aber muss jetzt der gesamte Javascript Code ins iFrame ?
Auf der "Hauptseite" wird dann kein Javascript eingebunden ?

Zitat von @Der-Ingo:
> Aber muss jetzt der gesamte Javascript Code ins iFrame ?

Nein, das bleibt in der Hauptseite!

Auf der "Hauptseite" wird dann kein Javascript eingebunden ?

Doch, das kommt dort hin.

Ok danke dir

So richtig hab ich es zwar immer noch nicht verstanden, wie das gehen soll.
Aber es läuft jetzt !! Allerdings aus dem iFrame heraus.

Hier mein neuer Code

<script type="text/javascript">  

    $(window).load(function(){
      
$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 10) {

                                   $('#ident1', window.parent.document).removeClass('Element1');  
                                   $('#ident1', window.parent.document).addClass('Element2');  

        } else {

                                   $('#ident1', window.parent.document).removeClass('Element2');  
                                   $('#ident1', window.parent.document).addClass('Element1');  

        }
    });
    });
    });

</script>