画面上でiPadのラインスクロール

iPadとflexmlsにスクロールシングルフィンガー

2011年4月13日にニックによって

今日の投稿はニック・ラーソン、flexmlsとiPadは互換性のある作りを課されたFBSのウェブ開発インターンの1からです。彼はflexmls内iPadでのスクロールを実装する方法以下の技術的な詳細について説明します。

-グレッグKilwein

iPadの：シングルフィンガーのIFrameスクロール

我々は最初のflexmlsとの互換性のためのiPadのテストを始めたとき、一つの大きな問題は、スクロールがflexmls内の多くのコアの場所で動作しなかったということでした。 iPadのデフォルトでは、div要素をスクロールするだけでなく、することは2本の指の代わりに、単一の指を必要とするが、インラインフレームは全くスクロールすることができません。目標は、可能な限り、スクロール、単一の指を提供することでした。

ありがたいことに、iPadは、我々は問題を解決始めるために使用できるタッチイベントに建てられたいくつかの素晴らしいを提供してくれます。イベントのカップルを使用して、具体的にtouchstartとtouchmove。我々は（我々はそれ以降のiframeの話をします）、アイフレームとは別に、任意のdivまたは他のスクロール要素のスクロール、単一の指を初期化するの世話をすることができ、簡単な関数を作成することができます。素晴らしいニュースは、これがあっても、タッチ対応のブラウザの中で、かなりクロスブラウザの互換性があることです。私はカップルのモバイルブラウザ上でそれをテストし、それものWindows Phone 7上のInternet Explorerで動作するようです！だから、いくつかの有用なリソースに出くわすのおかげで、私はこの思い付きました：

私は最初は巨大なプロジェクトであると思っていた何を、タッチイベントと少し研究に建てられたのおかげで簡単な修正になってしまいました。

今、ハードの部分に上に、インラインフレーム。 flexmlsは、システム全体で見られるコンテンツの多くを表示するには、インラインフレームに依存しています。 iPadの持つ問題は、それがすべてのフレームで素晴らしいプレーしないことです。

何らかの理由でiPadは、その高さの値を尊重していません。代わりに、所望の高さを維持し、スクロールを可能にすることで、iPadはちょうど、すべてのコンテンツに対応するために、垂直方向にはiframeを伸ばします。これは彼らが予想していなかったiPadのバグ、または何かをすることができたような気が。いずれにせよ、我々は修正を必要としていました。

すぐに私はちょうどそれの周りのdivをラップ考えるとスクロールをそのdiv要素を使用します。しかし、それは動作しません。 initMobileScroll関数がインラインフレームに適用され、スクロールしようとすると、IFRAMEはだけではなく、div要素のタッチイベントをキャプチャされたときにそれに問題があります。まあ、いくつかの後、私は二つの方法で最大することができたと思いました。

第一の方法、「バージョン1」は、タッチイベントは、同じウィンドウのコンテキストに留まるとiframeによってキャッチされませんので、iframeの上に絶対位置のdivを配置することを含みます。この方法の唯一の問題は、それが（リンクなど）unclickableのiframe内のすべてをレンダリングすることです。このオプションは、次のようになります。

まあそれはまともな選択肢となっていますが、ユーザーはiframe内に物事をクリックすることができるように何が必要か？第二の方法、「バージョン2」は、この問題を解決します。それが親文書と同じドメインでホストされているフレーム化コンテンツが必要ですが、それは間違いなく動作します。

私たちにできることは、単に非表示のiframeを維持し、それがロードされる後のiframeの外にコンテンツをプルするために「innerHTMLプロパティ」プロパティを使用しています。私たちは、その後のdivにコンテンツを配置し、div要素の代わりにはiframeに私たちのモバイルスクロールを適用することができます。

このメソッドは、次のようになります。

それはかなりそれです。ただ、非表示のiframeからコンテンツを取得し、iPad上ではるかに良い振る舞うのdivにそれを投げます。今のiframeのソースが変更されるたびに、divが自動的に新しいコンテンツがリロードされます！もう一つ注意すべきは、インラインフレーム内のコンテンツは、同じドメインでホストされているときにinnerHTMLプロパティにのみ動作することです。そうでない場合は、ブラウザが試みをブロックします。

私はこれがiPadでスクロールを実現する方法についていくつかの洞察力を与える願っています。

インラインフレームの拡張は仕様です。私は、「何が」それを無効にします=スクロールと思いませんが、私はあなたがしてJSから内容をスクロールすることができますかはわかりません。

しかし、これは私にとって素​​晴らしい素晴らしいスタートです。感謝

7:46でニック・2011年6月20日

ありがとうございます！あなたはいつもtouchMovedYとtouchMovedXに乗数を追加してみてください可能性があります。私は、スクロール時にそれが自然な感じかないだろうかはわからないが、やってみる価値があるだろう。

私はここで何かをしないのです信じています。

同時にスライドと右からスライドを例えば左に外れ - 私が原因で「スライディング・コンテンツ」のページは、iPhoneへの一般的な変更のiPad（および任意の他の「大画面」）上の私のメインのコンテンツをホストするためにiFrameを必要としていました。この場合、「DIV」タグは、それらが所定の位置にスライドさせると、完全に、着信と発信のページ、横並びの両方を示すことによってスライドコンテンツを非表示にすることができません。よくない表情。

だから私は戻って、もともとフラッシュオーバーレイHTMLコンテンツディスプレイ用に開発された私の古いiFrameのモデル、に行ってきました。 iFrameの「マスク」意図したとおりにのみ単一のページビューを表示するスライドコンテンツ。私の正確な目的の意図 - これらのコンテンツページは、固定ヘッダーとフッターのiFrameディスプレイの内側上部と下部にある、との間で​​スクロール可能なコンテンツを持つ「DIV」タグを使用して設計されています。

このスクロールは、コンテンツが選択可能で、ページをスワイプ可能なされているだけでなく、スクロール可能な単一の指です。

だから私は、上記のポストは少し困惑見つけます。私にとっては、「DIV」タグがある/実行可能なソリューションではありませんでした。しかし、iFrameのは完璧ですし、私の限られたテストで正常に動作するようです。 （注：私は上記よりもかなり多くのjavascriptを持っています。）

ニック2011年9月7日10時45分午前

それは面白い。最後私は人々がインラインフレームに伴う問題のトンを有し、iPadでスクロールされてきた、見えました。 IOSの新しいバージョンのいずれかがない限り以降の問題のいくつかを修正しました。その場合には、素晴らしいです！ちょうど私が扱ってきた問題のいくつかにあなたを記入します」のiPadのiframe」のGoogle検索を行います。

0:10マイケル・2011年9月7日

「もう一つ注意すべきは、IFRAME内のコンテンツは、同じドメインでホストされているときにinnerHTMLプロパティにのみ動作することです。そうでない場合は、ブラウザが試みをブロックします。」

iframe内に表示されるコンテンツのiframeが表示されているWebサイトと同じサーバー上に存在しなければならないが - これが何を意味するのかわかりませんか？そこにホストされていない内容を含む：その場合は、それがウェブサイトでのiFrameを含むの主要な目的を台無しにしてしまいます。

明確にしてくれてありがとう

ニック2011年9月7日午前10時29分午前

つまり、コンテンツが原因で同一生成元ポリシー（en.wikipedia /ウィキ/ Same_origin_policy）に同じサーバ上にある必要があり、正確です。

私たちのケースでは、我々は、主に/ etcを別の機能/要素を表示するために、過去にインラインフレームを使用していました。ページ上ではなく、別のドメインからのコンテンツ。 en.wikipedia /ウィキ/ HTML_element＃フレーム：iframe要素上のWikipediaのページには、私たちが最初にそれらを使用するために選んだ理由のかなり良い説明を持っています

しかし、今（AJAXの形で）XMLHTTPリクエストのためのより良いサポートがあること、（すべてではない）私たちは回避することが可能にに実行したこのような状況の中で最も。

こんにちは、みんな。私は申し訳ありませんが、この記事について忘れてしまいました。

また、私は現在、コンテンツのスクロールにCubiqのiScroll 4を使用します。コンテンツをスクロールしながらこれは、固定ヘッダとフッタを可能にします。基本的にすべての私が必要としていました。とにかく、ここにクリップされた容器（ないのiFrame）でスクローラの剥奪バージョンへのリンクです。 iphoneが小さすぎるので、容器が消えるなどのブラウザ、アプリ、iphone、 - 何にも（今仕掛品）に設計されています。

これは、クロスブラウザのコードベースとしてのjQueryを使用し、また、「ウィジェット」マネージャーとしてJavaScriptMVCコントローラを使用していました。例では、ボタン、すべてが動作しません。それだけでスクロールデモ用です。スクローラは夢のように動作します。

（上部の金のテキストは、アクティブなデバッグログです。）

いくつかの内容を動的にJavaScriptのによって作成され、そのイベントハンドラが動的要素にアタッチされた場合innerHTMLプロパティの使用は、動作するのでしょうか？