Linia Ipad na ekranie podczas przewijania

iPad i jednym palcem Przewijanie w flexmls

Nick w dniu 13 kwietnia 2011

Dzisiejszy post jest od Nicka Larsona, jednego z stażystów tworzenie stron internetowych FBS, którzy otrzymał zadanie dokonywania iPad kompatybilny z flexmls. Omawia techniczne szczegóły poniżej w jaki sposób realizowane przewijania na iPadzie ciągu flexmls.

-Greg Kilwein

iPad: Single Finger iframe scrolling

Kiedy po raz pierwszy rozpoczął testowanie iPada pod kątem zgodności z flexmls jeden głównym problemem było to, że przewijanie nie działa w wielu miejscach bazowej wewnątrz flexmls. Standardowo na iPada, nie tylko przewijanie div wymagają dwóch palców zamiast jednym palcem, ale iframe nie są w stanie przejść w ogóle. Celem było stworzenie jednego palca przewijania, jeśli możliwe.

Na szczęście, iPad daje nam kilka świetnych zbudowany w imprezach dotykowych, które możemy wykorzystać, aby zacząć rozwiązywanie problemu. Stosując kilka wydarzeń, a konkretnie touchstart i touchmove. jesteśmy w stanie stworzyć prostą funkcję, która może zająć się inicjowanie jednego palca przewijania na każdej div lub innego elementu przewijania Oprócz iframe (porozmawiamy o iframe później). Dobrą wiadomością jest to, że jest to dość kompatybilne z różnymi przeglądarkami, nawet wśród przeglądarek dotyk stanie. Testowałem go na kilka przeglądarek mobilnych, i wydaje się nawet do pracy z Internet Explorer na Windows Phone 7! Więc dzięki napotykając kilka przydatnych zasobów, wpadłem w ten sposób:

Co początkowo myślałem, że będzie to ogromny projekt, zakończył się w prosty fix dzięki wbudowanemu zdarzeń dotykowych i trochę badań.

Teraz na twardej części, iframes. flexmls polega na ramkach do wyświetlania wiele zawartości widziany w całym systemie. Problem z iPada jest to, że nie gra miłe z ramkami w ogóle.

Z jakiegoś powodu iPad nie szanują ich wartość wysokości. Zamiast utrzymywać pożądaną wysokość i umożliwia przewijanie, iPad prostu wyciąga iframe w pionie, aby pomieścić całą zawartość. Czuję, że to może być błąd z iPada, czy coś nie były one przewidywanie. Tak czy inaczej, potrzebowaliśmy poprawkę.

Od razu pomyślałem o zaledwie zawijania div wokół niego i użyj tego div do przewijania. Jednak, że nie działa. Problem z tym jest, gdy funkcja initMobileScroll jest stosowany do iframe i spróbować przewijania iframe prostu rejestruje zdarzenia dotykowe zamiast div. Cóż, po namyśle udało mi się z dwoma sposobami.

Pierwsza metoda "wersję 1", polega na umieszczeniu absolutnie umieszczony div nad iframe więc zdarzenia dotykowe pozostać w ramach tego samego okna i nie daj się złapać przez iframe. Jedyną wadą tej metody jest to, że czyni wszystko w iframe unclickable (jak linków). Opcja ta będzie wyglądać następująco:

Dobrze, że jest dobrą opcją, ale co jeśli użytkownicy muszą być w stanie kliknąć na rzeczy w iframe? Druga metoda ", wersja 2" rozwiązuje ten problem. Choć wymaga ramce treści znajdować w tej samej domenie co dokument dominującej, to na pewno działa.

Co możemy zrobić, to po prostu zachować iframe ukryty i użyć "innerHTML" własność wyciągnąć zawartość z iframe po jej załadowaniu. Możemy umieścić zawartość do div i zastosować naszą mobilną zwój do div zamiast iframe.

Metoda ta będzie wyglądać mniej więcej tak:

To dość dużo. Tuż przy zawartości z ukrytym iframe i rzuca ją do div, który zachowuje się znacznie lepiej na iPada. Teraz za każdym razem źródłem iframe jest zmieniana, div automatycznie przeładować z nową zawartością! Warto zauważyć, że innerHTML działa tylko wtedy, gdy zawartość w iframe jest utrzymywana na tej samej domenie. Jeśli tak nie jest, to przeglądarka zablokuje próbę.

Mam nadzieję, że to daje pewne wyobrażenie o tym, jak osiągnąć przewijanie na iPadzie.

Ekspansja iframe jest zgodne z projektem. Myślę scrolling = "no" będzie ją wyłączyć, ale nie jestem pewien, czy będziesz wtedy mógł przewijać zawartość z JS.

Ale jest to świetny świetny początek dla mnie. Dzięki

Nick 20 czerwca 2011 o 7:46 am

Dzięki! zawsze można spróbować dodać mnożnik do touchMovedY i touchMovedX. Nie jestem pewien, czy czułby się naturalne, czy nie podczas przewijania, ale warto byłoby spróbować.

Wierzę, że jestem brakuje czegoś tutaj.

Potrzebowałem iFrame gościć mój główny treści na iPadzie (i każdego innego "dużego ekranu") ze względu na stronie "rozsuwanej content 'zmienia wspólne dla iPhone - slajd z prawej z jednoczesnym wysuwaną do lewej na przykład. W tym przypadku tag "div" nie ukryć zawartość przez przesuwne pełni wykazujące zarówno przychodzących i wychodzących stron obok siebie, jak ślizgają się na swoim miejscu. To nie jest dobry wygląd.

Wróciłem więc do mojego starego modelu iframe, pierwotnie opracowany dla błysku nakładki HTML treści wyświetlaczy. Iframe 'Maski' The treść przesuwając wyświetlania tylko jeden widok strony zgodnie z ich przeznaczeniem. Te strony są zaprojektowane z myślą o treści ustalonej nagłówka i stopki na środku górnej i dolnej części wyświetlacza iFrame, a "div" tag z funkcją przewijania zawartości pomiędzy nimi - dokładnie mojego pożądanego intencji.

To jest jedno-scroller palec przewijane, zawartość jest wybierana, a strona jest bezstykowa-stanie, jak również.

Więc uważam Powyzszy wpis nieco kłopotliwy. Dla mnie, znacznik 'div' jest / nie było dobrym rozwiązaniem. Ale iFrame jest doskonała i wydaje się działać prawidłowo w moim ograniczonym badaniem. (Uwaga: mam trochę więcej javascript niż wymienione powyżej).

Nick 07 września 2011 o 10:45

To interesujące. Ostatnio widziałem, ludzie zostali mając mnóstwo problemów z iframe i przewijanie na iPadzie. Chyba jednym z nowych wersjach iOS od tego czasu stała niektóre z problemów. W takim przypadku, niesamowite! Po prostu robi wyszukiwania Google z "iframe ipad" wypełni Ci na niektóre z problemów, jakie zostały do ​​czynienia.

michael 7 września 2011 o 12:10 am

"Jedną z rzeczy, należy stwierdzić, że innerHTML działa tylko wtedy, gdy zawartość w iframe jest utrzymywana na tej samej domenie. Jeśli tak nie jest, to przeglądarka zablokuje próbę. "

nie wiem, co to oznacza - zawartość wyświetlaną w iFrame musi znajdować się na tym samym serwerze, na stronie internetowej, na której jest wyświetlana iframe? Jeśli tak jest w istocie, to pokonać Głównym celem w tym iFrame na stronie internetowej: w tym treści nie gościł.

Dzięki za wyjaśnienie

Nick 07 września 2011 o 10:29 am

To prawda, treść musi być na tym samym serwerze z powodu tej samej polityki pochodzenia (en.wikipedia / wiki / Same_origin_policy).

W naszym przypadku, wykorzystywane głównie iframes w przeszłości, aby wyświetlać różne funkcje / elementów / etc. na stronie, a nie treści z innej domeny. Na stronie Wikipedii na elemencie iframe ma dość dobre wyjaśnienie, dlaczego początkowo wybrał z nich korzystać: en.wikipedia / wiki / HTML_element # Frames

Jednak teraz, że istnieje o wiele lepsze wsparcie dla żądań XMLHTTP (w postaci Ajax), większość (jeśli nie wszystkie) z tych sytuacji, jakie działają w celu można uniknąć.

Cześć wszystkim. Zapomniałem o tym poście, przepraszam.

Również używam CubIQ za iScroll 4 obecnie za treść przewijania. Umożliwia to stały nagłówek i stopkę podczas przewijania zawartości; w zasadzie wszystko, co potrzebne. W każdym razie, tu jest link do pozbawionego wersji zmieniacza w obcięty pojemnika (nie iFrame). Jest on przeznaczony (praca w toku przed chwilą) na czymkolwiek - przeglądarek, iPad, iPhone, itp iPhone jest zbyt mała, więc pojemnik zniknie.

Ten wykorzystuje jQuery jako podstawa kodu z różnymi przeglądarkami, a także wykorzystywany kontroler JavaScriptMVC jako "widget" kierownika. Na przykład, wszystkie przyciski i nie działają; jest to tylko demo scroller. Przewijacz działa jak marzenie.

(Tekst złota na górze jest aktywnym dziennika debugowania).

Czy korzystanie z innerHTML działa, jeśli niektóre treści są tworzone dynamicznie przez skrypty JavaScript i obsługi zdarzeń, że były również dynamicznie przypisane do elementów?