Ipad קו על המסך בעת גלילה

iPad ו באצבע אחת גלילה ב flexmls

על ידי ניק ביום 13 באפריל 2011

הפוסט של היום הוא מ- ניק לארסון, אחד המתמחים בפיתוח האינטרנט של FBS אשר הוטל ביצוע iPad תואם flexmls. הוא דן את הפרטים הטכניים בהמשך כיצד יישם גלילה באייפד בתוך flexmls.

-גרג Kilwein

iPad: באצבע אחת גלילה IFrame

כשהתחלנו לבדוק את iPad עבור תאימות עם flexmls, נושא מרכזי אחד היה כי גלילה לא לעבוד במקומות רבים הליבה בתוך flexmls. כברירת מחדל באייפד, לא רק גלילת דיב דורשת שתי אצבעות במקום אצבע אחת, אך משתנה באופן לא מסוגל לגלול בכלל. המטרה הייתה לספק אצבע אחת גלילה בכל מקום אפשרי.

למרבה המזל, האייפד מספק לנו כמה בנוי נהדר באירועי מגע שאנחנו יכולים להשתמש בו כדי להתחיל לפתור את הבעיה. באמצעות כמה מן האירועים, במיוחד touchstart ו touchmove. אנו מסוגלים ליצור פונקציה פשוטה שיכול לטפל אתחול אצבע אחת גלילה על כל div או אלמנט גלילה אחר מלבד מסגרות (נדברנו על iframes מאוחר יותר). הבשורה הגדולה היא כי זה די לדפדפנים תואמים, גם בקרב דפדפני מגע מסוגל. בדקתי את זה על כמה דפדפנים ניידים, וזה אפילו נראה לעבוד עם Internet Explorer ב- Windows Phone 7! אז תודה באו על פני כמה משאבים מועילים, אני בא עם זה:

מה אני בהתחלה חשבתי הולך להיות פרויקט ענק, בסופו של דבר להיות תיקון פשוט הודות מובנה אירועי מגע מחקר קטן.

עכשיו את החלק הקשה, iframes. flexmls מסתמך על iframes להצגה מרבית התוכן לראות בכל המערכת. הבעיה עם האייפד היא שזה לא נחמד לשחק עם מסגרות בכלל.

מסיבה כלשהי האייפד אינו מכבד ערך גובהם. במקום לשמור לגובה הרצוי ומאפשר גלילה, האייפד רק מותח את iframe אנכית כדי להתאים את כל התוכן. אני מרגיש כאילו זה יכול להיות באג עם האייפד, או משהו שהם לא ציפו. כך או כך, אנו זקוקים לזריקת עידוד.

מיד חשבתי על רק עטיפה div סביב אותו ולהשתמש div כי עבור גלילה. עם זאת, זה לא עובד. הבעיה עם זה היא כאשר פונקצית initMobileScroll מוחלת על iframe ולנסות לגלול, ה- iframe רק לוכד את אירועי מגע במקום div. ובכן, אחרי מחשבה קצרה הצלחתי עם שתי שיטות.

השיטה הראשונה, "הגרסה 1", כרוך הצבת div מיקום מוחלט על iframe לפיכך, אירועי המגע להישאר בהקשר של אותו החלון לא להיתפס על ידי iframe. הבעיה היחידה עם שיטה זו היא כי זה הופך את הכל iframe ללחיצה (כמו קישורים). אפשרות זו הייתה נראית משהו כזה:

ובכן זה אופציה לא רעה, אבל מה אם משתמשים צריכים להיות מסוגלים ללחוץ על דברים iframe? השיטה השנייה, "גרסה 2", מתייחס לנושא זה. למרות שזה דורש תוכן הממוסגר להתארח באותו התחום כמסמך ההורה, זה בהחלט עובד.

מה שאנחנו יכולים לעשות זה רק לשמור iframe הנסתר ולעשות שימוש בקניין "innerHTML" למשוך את התוכן מתוך iframe אחרי זה טעון. אז אנו יכולים למקם את התוכן לתוך div, ולהחיל הגלילה הניידת שלנו אל div במקום iframe.

שיטה זו תיראה בערך כך:

זה פחות או יותר אותו. פשוט לקחת את התוכן מ- iframe הנסתר ולזרוק אותו div, אשר מתנהג הרבה יותר טוב באייפד. עכשיו בכל פעם של מקור iframe הוא שונה, את div יטען מחדש באופן אוטומטי עם התוכן החדש! דבר אחד לציין הוא כי innerHTML פועל רק כאשר תוכן iframe מתארח באותו התחום. אם זה לא, הדפדפן יחסום הניסיון.

אני מקווה שזה נותן כמה תובנות על איך לבצע גלילה באייפד.

הרחבת iframes הוא מכוון. אני חושב גלילה = "לא" ישבית אותו, אבל אני לא בטוח אם אתה ואז אהיה מסוגל לגלול את התוכן מ JS.

אבל זוהי התחלה טובה גדולה בשבילי. תודה

ניק 20 ביוני 2011 כשהוא 7:46 am

תודה! אתה תמיד יכול לנסות להוסיף מכפיל touchMovedY ו touchMovedX. אני לא בטוח אם זה היה מרגיש טבעי או לא בעת גלילה, אבל זה יהיה שווה לנסות.

אני מאמין שאני מפספס משהו כאן.

נזקקתי iFrame לארח התוכן הראשי שלי באייפד (וכל 'גדול מסך' אחר) בשל בדף 'זזה-התוכן' משתנה משותף ל- iPhone - שקופית מימין עם שקופיות הסימולטאני לשמאל למשל. במקרה זה, תג 'div' מצליח להסתיר את התוכן זז על ידי הצגה באופן מלא את הדפים נכנסים ויוצאים, זה לצד זה, כפי שהם להחליק לתוך המקום. לא נראה טוב.

אז חזרתי מודל iFrame הישן שלי, שפותח במקור עבור לתוכן מציג כיסוי פלאש HTML. ה 'המסכות' iFrame את את התוכן הזז מוצג תצוגת דף בודדת רק כמתוכנן. דפי תוכן אלה נועדו עם כותרת עליונה ותחתון קבועים בחלק העליון והתחתון הפנימיים של תצוגת iFrame, ותג 'div' עם תוכן לגלילה בין - הכוונה הרצויה המדויקת שלי.

גלילה זו של אצבע אחת לגלילה, התוכן הוא לבחירה והדף הוא מסוגל לסחוב גם כן.

אז אני מוצא את ההודעה הנ"ל קצת מביך. בשבילי, התג 'div' הוא / לא היה פתרון בר קיימא. אבל iFrame מושלם ונראה שהיא פועל בסדר בבדיקה המוגבלת שלי. (הערה: יש לי לא מעט עוד javascript מ המפורטים לעיל.)

ניק 7 בספטמבר, 2011 בשעה 10:45

זה מעניין. האחרונה שבדקתי, אנשים כבר אחרי המון בעיות עם iframes וגלילה באייפד. אלא אם כן אחד הגירסות החדשות של iOS יש קבוע מאז חלק מהבעיות. במקרה זה, מדהים! אני רק עושה חיפוש בגוגל של "iframes ipad 'ימלא לך על כמה מן הבעיות אני כבר להתמודדות עם.

מיכאל 7 בספטמבר, 2011 בשעה 12:10

"דבר אחד לציין הוא כי innerHTML פועלת רק כאשר תוכן iframe מתארח באותו התחום. אם זה לא, הדפדפן יחסום הניסיון. "

לא בטוח מה זה אומר - התוכן המוצג iFrame יש להתגורר על אותו שרת כאתר אינטרנט שבו iframe מוצג? אם זה המקרה, זה היה להביס את המטרה העיקרית של iFrames לרבות אתר: כולל תוכן שאינו מתארח שם.

תודה על הבהרה

ניק 7 בספטמבר 2011 בשעה 10:29 am

זה נכון, התוכן צריך להיות על אותו שרת בשל אותה מדיניות המוצא (en.wikipedia / wiki / Same_origin_policy).

במקרה שלנו, אנחנו בעיקר בשימוש iframes בעבר להציג תכונות / אלמנטים שונים / etc. בדף ולא תוכן מדומיין אחר. דף ויקיפדיה על אלמנט iframe יש הסבר די טוב למה אנחנו בתחילה בחרנו להשתמש בם: en.wikipedia / wiki / HTML_element מסגרות #

עם זאת, עכשיו יש הרבה תמיכה טובה יותר עבור בקשות xmlhttp (בצורת ajax), רוב (אם לא כל) של מצבים אלה שביצענו כדי ניתן להימנע מכך.

שלום לכולם. שכחתי את הפוסט הזה, מצטער.

גם אני משתמש iScroll של Cubiq 4 כרגע עבור גלילת תוכן. זה מאפשר נגיחה קבועה ותחתון בעת ​​גלילת התוכן; בעצם כל מה שהייתי צריך. בכל מקרה, הנה קישור לגרסה הפשיטה של ​​הגלילה במכל מקוטע (לא iFrame). היא מיועדת (עבודה בתהליך זה עתה) על כל דבר - דפדפנים, iPad, iPhone, וכו 'ה iPhone הוא קטן מדי ולכן המכל נעלם.

זה משתמש jQuery כבסיס קוד לדפדפנים וגם השתמש בקר JavaScriptMVC כמנהל "יישומון". על הדוגמה, הכפתורים וכל אינם פועלים; זה עבור הדגמת גלילה בלבד. הגלילה עובדת כמו חלום.

(טקסט הזהב בחלק העליון הוא יומן באגים פעיל.)

האם שימוש innerHTML עובד, אם תוכן כמה נוצרים בצורה דינמית על ידי javascripts וכי מטפלי אירועים גם צורפו באופן דינמי לפגעי מזג האוויר?