Ankündigung

Einklappen
Keine Ankündigung bisher.

scroll-event vom iFrame zur Hauptseite übertragen bzw. dort ausführen...

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • scroll-event vom iFrame zur Hauptseite übertragen bzw. dort ausführen...

    Hallo Leute,

    in meiner Seite wird ein iFrame geladen in dem vom User ein HTML-Code geladen wird (deshalb iFrame).
    Im großen und ganzen klappt was ich haben möchte bereits, ich habe einen bidirektionalen Kommunikations-weg damit sich die Seite dynamisch anpassen kann.

    Was mir fehlt ist das scroll event vom iFrame auf die Hauptseite zu übertragen.
    Die Höhe des iFrames richtet sich nach dem Inhalt, d.h. es kann z.B. 2000px hoch sein, befindet sich die Maus über dem iFrame und man scrollt, wird nur das scroll-event im iFrame ausgelöst aber nicht auf der Seite die das iFrame einbettet.

    js im iFrame:
    Code:
    // scrollHandler to emit scroll event to mainpage
    function scrollHandler(event){
        var e = window.event || event;
        // hier übergebe ich nur die richtung + (hoch) oder - (runter)
        mainPage.postMessage({cmd: "scroll", scroll: Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))}, mainOrigin);
        // nachfolgend war ein Test ob ich das ganze Event übertragen kann (klappte nicht)
        // mainPage.postMessage({cmd: "scroll", scroll: JSON.stringify(e)}, mainOrigin);
    }
    if( window.addEventListener ){
        window.addEventListener("mousewheel", scrollHandler, false); // IE9+, Chrome, Safari, Opera
        window.addEventListener("DOMMouseScroll", scrollHandler, false); // Firefox
    }else{
        window.attachEvent("onmousewheel", scrollHandler); // IE 6/7/8
    }
    js Webseite:
    Code:
    // wir erhalten 2 verschiedene messages, die hier empfangen werden
    window.addEventListener('message', function(event){
        if (~event.origin.indexOf("https://illex-media.com")){
            switch( event.data.cmd ){
                case 'setSize':
                    descFrameEl.height = event.data.height+'px';
                    $('#content2').unblock();//.attr('style', '');
                    break;
    
                case 'scroll':
                    scrollOnDesc(event.data.scroll);
                    break;
            }
        }else{
            // The data hasn´t been sent from your site! Be careful! Do not use it.
            return;
        }
    });
    
    function scrollOnDesc(direction){
        var scrollSize = ( direction < 0 ) ? 150 : -150,
            scrollPos = $(window).scrollTop();
    
        $('html').stop().animate({scrollTop: scrollPos+scrollSize+'px'}, 300);
    }
    Dieser Code funktioniert, die Darstellung ist leider sehr holprig bzw. wenn man das Mausrad schnell durchgehend dreht, führt es zu Problemen.
    Gibt es nicht die Möglichkeit die Browserintern Scroll-Funktion anzusteuern?
    Oder welche Lösung wäre schöner um ein schönes und sauberes Scrollen zu erhalten?

    MfG: Paykoman

    ::EDIT::
    Habe gerade gemerkt dass das Problem nur auftritt wenn man niceScroll einsetzt, ohne niceScroll sieht die Welt besser aus *g


  • #2
    Hallo,

    nimm den gescrollten Wert in Pixeln vom iframe und übertrage ihm auf das umschließende HTML Dokument. Dann hast du es pixelgenau und es sollte ruhiger sein.

    Was hält dich davon ab, das ganze in einen Container anstatt einem iframe zu packen? Soviel ich weiß versuchst du ja eh sämptlichen Schadcode aus dem User HTML heraus zu filtern. Dann ist es "sauber" und kann ohne Probleme in die Hauptseite eingebunden werden. Hat den Vorteil, du hast nur einen Scrollbalken und vermeidest so die ganzen Probleme. Was ich meine ist, du musst bisschen mit dem CSS overflow spielen, damit der innere Container die äußere Seite scrollt.


    MFG

    derwunner

    Kommentar


    • #3
      Zitat von derwunner Beitrag anzeigen
      Was hält dich davon ab, das ganze in einen Container anstatt einem iframe zu packen?
      Weil ers lieber umständlich hat. Einfache Lösungen mag er nicht. Ein Iframe ist dazu da externe Quellen einzubinden und nicht eigene. Wenn man gegen den Strom arbeitet, bedeutet das nun mal einen deutlicher Mehraufwand. Aber wenn man drauf steht...

      Kommentar


      • #4
        @hellbringer: wie so oft nur Unsinn, wie ich gern gegen den Strom arbeite, arbeitest du an sinn-freie Beiträge, so hat jeder sein Steckenpferd =)

        @derwunner: ja da hast Du natürlich recht, zu-mindestens den Versuch starte ich aber ich denke so 100% sicher kann es nie werden, sonst würde eBay sicher auch nicht den Umweg über ein iFrame gehen.

        Bei mir handelt es sich um ähnlichen Content und bisher war nur html so wie css/js ohne externe Quellen angedacht, also nur via <style> und <script type="text/javascript">, daher hätte es man ohne iFrame natürlich einfacher die eigentliche Seite zu ändern/manipulieren.
        Ich habe mich dazu entschlossen auf der Seite wo das iFrame eingebettet wird auf niceScroll zu verzichten, da die Fehler einfach nicht weg zu bekommen waren außer man würde ggf. anfangen das Plugin zu verändern.

        Von eBay habe ich mir auch abgeschaut den Usercontent über eine andere URL einzubinden, habe einfach nur eine php-Datei die das HTML-Grundgerüst ausgibt und in <body> wird dann die Beschreibung geladen.

        Ich habe zwar das Sandbox-Attribut das nur bei Google geht drinne mit "allow-same-origin allow-scripts", es ist so möglich das postMessages gesendet werden aber nach meinen Tests wird das iFrame blockiert sobald es versucht auf die Hauptseite zuzugreifen (cookies oder html-elemente) und das auch bei anderen Browsern.
        Ich denke das hier die andere Domain das ganze noch sichererer macht (Chrome verwundert mich jedoch bissl) aber jetzt sollte es doch sogar sicher sein externe js und css Dateien zu erlauben, nicht mal ein alert wird ausgeführt =)

        Kommentar


        • #5
          Klar, ganz sicher wird fremdes HTML einbinden nie gehen. Die großen E-Mailanbieter, die eine Webansicht haben, bekommen das aber auch hin. Von daher bin ich zuversichtlich, dass es bei dir auch klappt.

          Kommentar


          • #6
            Stimmt, da habe ich ja noch garnicht dran gedacht

            ::EDIT::
            Habe da noch ein kleines Adendum, ich nutze niceScroll und das war überhaupt erst ausschlaggebend das wenn sich die Maus über dem iFrame befindet, das scrollEvent eben aussetzt.
            Habe es jetzt erst mal so gelöst das auf dieser bestimmten Seite das Plugin nicht verwendet wird, hatte aber auch nicht großartig geschaut ob es da einen fix für gibt.

            Kommentar

            Lädt...
            X