Ipad Linie auf dem Bildschirm beim Scrollen

iPad und Single-Finger-Scrolling in flexmls

von Nick am 13. April 2011

Der heutige Beitrag ist von Nick Larson, einer der Praktikanten Web-Entwicklung der FBS, die mit der Herstellung der iPad kompatibel mit flexmls beauftragt wurde. Er bespricht die technischen Details unten, wie er innerhalb flexmls auf dem iPad implementiert scrollen.

-Greg Kilwein

iPad: Single Finger IFrame Scrolling

Als wir zuerst mit flexmls Testen des iPad für die Kompatibilität begann, war ein großes Problem, dass Scrollen innerhalb flexmls in vielen Kern Orten nicht funktioniert hat. Standardmäßig auf dem iPad nicht nur ein div nicht Scrollen erfordern zwei Finger anstelle eines einzelnen Finger, aber iframes sind nicht in der Lage, überhaupt zu bewegen. Das Ziel war, einzelne Finger zu schaffen, Scrollen, wo immer möglich.

Zum Glück bietet das iPad uns mit einigen großen in Touch-Ereignisse gebaut, dass wir das Problem zu beginnen verwenden können, um zu lösen. Mit ein paar der Ereignisse, die speziell und touchTouchMove. wir sind in der Lage, eine einfache Funktion erstellen, die Pflege der Initialisierung einzigen Finger-Scrollen auf einem beliebigen div oder anderen Scroll-Element von iframes beiseite nehmen (wir werden über Iframes später sprechen). Die gute Nachricht ist, dass dies ziemlich Cross-Browser kompatibel ist, auch unter Touch-fähigen Browser. Getestet habe ich es auf ein paar mobile Browser, und es scheint sogar 7 mit Internet Explorer auf Windows Phone zu arbeiten! Also vielen Dank für ein paar hilfreiche Ressourcen zu kommen, kam ich mit auf den Punkt:

Was ich zunächst dachte, würde ein großes Projekt zu sein, endete dank ist eine einfache Lösung bis zum Kontakt Veranstaltungen und ein wenig Forschung aufgebaut.

Nun zu den harten Teil, die iframes. flexmls setzt auf Iframes Großteil der Inhalte im gesamten System gesehen anzuzeigen. Das Problem mit dem iPad ist, dass es nicht mit Frames schön spielt.

Aus irgendeinem Grund respektieren das iPad nicht ihre Höhenwert. Statt die gewünschte Höhe zu halten und ermöglicht Scrollen, das iPad erstreckt sich nur die iframe aus vertikal alle Inhalte aufzunehmen. Ich fühle mich wie diese einen Fehler mit dem iPad sein könnte, oder etwas, was sie waren nicht erwarten. So oder so, brauchten wir eine Lösung.

Gleich dachte ich nur ein div um ihn herum wickeln und verwenden Sie diese div zum Scrollen. Aber das funktioniert nicht. Das Problem dabei ist, wenn die initMobileScroll Funktion auf die iframe angewendet wird, und versuchen zu scrollen, die iframe fängt gerade die Touch-Ereignisse statt des div. Nun, nach einigem Nachdenken konnte ich mit zwei Methoden.

Die erste Methode "Version 1" ist, beinhaltet eine absolut positionierte div über die iframe platzieren, so dass die Touch-Ereignisse im Zusammenhang mit dem gleichen Fenster bleiben und nicht durch den iframe verfangen. Das einzige Problem bei dieser Methode ist, dass es alles in der iframe unclickable (wie Links) macht. Diese Option würde wie folgt aussehen:

Nun, das ist eine anständige Option, aber was ist, wenn Benutzer müssen sich auf Dinge in der iframe zu klicken zu können? Die zweite Methode, "Version 2", befasst sich mit diesem Thema. Während es den eingerahmten Inhalt erfordert auf der gleichen Domäne wie das übergeordnete Dokument gehostet werden, funktioniert es auf jeden Fall.

Was wir tun können, ist nur die iframe halten versteckt und nutzen die "innerHTML-" Eigenschaft, um den Inhalt aus dem iframe zu ziehen, nachdem es geladen wird. Wir können dann den Inhalt in ein div und setzen unsere mobilen Blättern zum div anstelle des iframe.

Diese Methode würde in etwa wie folgt aussehen:

Das wars so ziemlich. Allein durch den Inhalt des versteckten iframe und es zu einem div zu werfen, die auf einem iPad viel besser verhält. Nun jedes Mal, die Quelle des iframe geändert wird, wird die div automatisch mit dem neuen Inhalt neu laden! Eine Sache zu beachten ist, dass innerHTML- funktioniert nur, wenn der Inhalt in der iframe auf der gleichen Domain gehostet wird. Wenn es nicht ist, wird der Browser den Versuch zu blockieren.

Ipad Linie auf dem Bildschirm beim Scrollen

Ich hoffe, das gibt einen Einblick darüber, wie auf dem iPad zu erreichen Scrollen.

Der Ausbau der iframes ist konstruktionsbedingt. Ich denke, scrolling = "no" deaktivieren, aber ich bin mir nicht sicher, ob Sie dann in der Lage sein werden, den Inhalt von JS zu blättern.

Aber dies ist ein großer guter Start für mich. Vielen Dank

Nick 20. Juni 2011 um 7:46 Uhr

Vielen Dank! Sie können immer versuchen, einen Multiplikator zu touchMovedY und touchMovedX hinzufügen. Ich bin mir nicht sicher, ob das natürliche fühlen würde oder nicht beim Scrollen, aber es wäre einen Versuch wert sein.

Ich glaube, ich bin hier fehlt etwas.

Ich ein iFrame brauchte, um meine Hauptinhalt auf einem iPad Host (und alle anderen "großen Bildschirm ') aufgrund des" Sliding-content' Seite ändert sich auf das iPhone gemeinsam - Schlitten von rechts bei gleichzeitiger Schlitten heraus zum Beispiel links. In diesem Fall schlägt ein 'div' Tag der Schiebe Inhalt zu verbergen, indem sie vollständig sowohl die ein- und ausgehenden Seiten, die Seite an Seite zeigt, wie sie an ihren Platz schieben. Kein gutes Aussehen.

Also ging ich zurück zu meinem alten Modell iFrame, ursprünglich entwickelt für Flash-Overlay-HTML-Inhalt angezeigt. Die iFrame "Masken" die der Schiebe Inhalt nur eine einzige Seite Ansicht wie beabsichtigt angezeigt werden. Diese Inhaltsseiten werden mit einem festen Kopf- und Fußzeile an der Innenseite der oberen und unteren Rand des iFrame-Display konzipiert, und ein "div" -Tag mit scrollbaren Inhalt zwischendurch - meine genaue gewünschte Absicht.

Das Stellrad ist Single-Finger scrollbaren, der Inhalt ist frei wählbar und die Seite ist Swipe-Lage als gut.

So finde ich den oben genannten Post ein bisschen verwirrend. Für mich ist das 'div' Tag ist / war keine gangbare Lösung. Aber die iFrame ist perfekt und scheint in meiner begrenzten Tests gut zu funktionieren. (Anmerkung: Ich habe nicht ein bisschen mehr Javascript als oben aufgeführt sind.)

Nick 7. September 2011 um 10.45 Uhr

Das ist interessant. Zuletzt sah ich, haben die Menschen auf dem iPad eine Tonne Probleme mit iframes und Scrollen mit. Es sei denn, eine der neuen Versionen von ios hat, da einige der Probleme behoben. In diesem Fall genial! Nur tun, eine Google-Suche von "ipad iframes 'werden Sie füllen auf einige der Probleme, die ich habe mit beschäftigt.

michael 7. September 2011 um 12:10 Uhr

"Eine Sache zu beachten ist, dass innerHTML- funktioniert nur, wenn der Inhalt in der iframe auf der gleichen Domain gehostet wird. Wenn es nicht ist, wird der Browser den Versuch zu blockieren. "

nicht sicher, was das bedeutet - den Inhalt im iFrame angezeigt hat auf dem gleichen Server wie der Web-Site zu befinden, auf dem die iframe angezeigt wird? Wenn das der Fall ist, wäre es das Hauptziel der mit iFrames in einer Website zu besiegen: einschließlich Inhalt nicht dort gehostet.

Danke fürs klarstellen

Nick 7. September 2011 um 10:29 Uhr

Das ist richtig, wird der Inhalt auf dem gleichen Server aufgrund der gleichen Herkunft Politik (en.wikipedia / wiki / Same_origin_policy) sein muss.

In unserem Fall haben wir in erster Linie Iframes in der Vergangenheit verschiedene Funktionen / Elemente / etc angezeigt werden soll. auf einer Seite, anstatt Inhalte aus einer anderen Domäne. Die Wikipedia-Seite über dem iframe Element hat eine ziemlich gute Erklärung, warum wir wählten zunächst, sie zu benutzen: en.wikipedia / wiki / HTML_element # Frames

Aber jetzt, dass es viel bessere Unterstützung für XMLHttp Anfragen (in Form von Ajax), die meisten (wenn nicht alle) dieser Situationen, die wir in laufen haben zu können vermieden werden.

Hallo zusammen. Ich habe vergessen, über diese Nachricht, sorry.

Auch verwende ich Cubiq des iScroll 4 derzeit für den Inhalt Scrollen. Dies ermöglicht eine feste Kopf- und Fußzeile, während der Inhalt Scrollen; im Grunde alles, was ich brauchte. Wie auch immer, hier ist ein Link zu einer abgespeckten Version des Scrollers in geclippt Behälter (nicht iFrame). Es ist so konzipiert (ein in Arbeit gerade jetzt) ​​auf irgendetwas - Browser, ipad, iphone, etc. Das iphone zu klein ist, so dass der Behälter verschwindet.

Dies nutzt jQuery als Cross-Browser-Code-Basis und auch die JavaScriptMVC Controller als "Widget" Manager verwendet. Am Beispiel sind die Tasten und alle nicht in Betrieb nehmen; es ist nur für scroller Demo. Das Stellrad funktioniert wie ein Traum.

(Der Text des Gold an der Spitze ist ein aktives Debug-Protokoll.)

Wird die Verwendung von innerHTML- funktioniert, wenn einige Inhalte dynamisch von Javascripts erstellt werden und dass Event-Handler wurden auch dynamisch an die Elemente angebracht?

Zusammenhängende Posts

  • Der normale Apple Care Plan umfaßt nicht den versehentlichen Schaden, da sie die allgemeinen Garantiebedingungen folgt, die den normalen Gebrauch im Allgemeinen tragen decken, wenn es nur abgedeckt ist behindert sowohl eine normale ...

  • Unter der Annahme, wir reden über einen wartenden iPad (nicht veraltet) ist es relativ abhängig davon, ob Sie Apple Care Plus-Abdeckung. Apple Care Plus bietet zwei Unfallschäden bis ...

  • Gebrochene mein neues iPad! Was mache ich? Tracilynnribble sagte: Hallo! Ich bin neu in der elektronischen Welt und haben ein iPad 3. Ich geknackt mein iPad sein nicht zerbrochen, aber ich habe einen großen Riss verlassen. Ich muss einfach...

  • So fähig, werden Sie nicht wollen, dass es nach unten zu setzen. So dünn und leicht, werden Sie nicht zu haben. Nicht nur ein dünner Display. Eine schöne Anzeige. Massiver Macht. In einer Minimalform. Bis zu 10 Stunden Akkulaufzeit nicht ...

  • iPhone oder iPad nicht geladen? Hier ist, wie es zu beheben! Kann nicht Ihr iPhone oder iPad aufladen? Hier sind einige Korrekturen können Sie versuchen! Wenn Sie nicht Ihr iPhone, iPad aufladen oder Ihren iPod touch, ob es das ist ...


Warning: include_once(/home/admin/web/german.mobilesbuzz.com/public_html/ins/aftercontent.txt): failed to open stream: No such file or directory in /home/admin/web/german.mobilesbuzz.com/public_html/wann/ipad-linie-auf-dem-bildschirm-beim-scrollen.php on line 144

Warning: include_once(): Failed opening '/home/admin/web/german.mobilesbuzz.com/public_html/ins/aftercontent.txt' for inclusion (include_path='.:/usr/share/pear:/usr/share/php') in /home/admin/web/german.mobilesbuzz.com/public_html/wann/ipad-linie-auf-dem-bildschirm-beim-scrollen.php on line 144