iFrameとMobile Safari（iPad/iPhone）

Question

ここに問題がありますが、iframeのWebページが必要です。このiframeは幅と高さの両方で一定のサイズを持たなければなりません。素敵なiOSがフレームの高さ属性を無視して強制的にすべてを表示するので、これはiOSでは機能しません（ジャーク！）。

通常のiframeとして機能させるにはどうすればよいですか？

Answer 1

私はあなたがフレーム化されたページの両方を所有しているか、またはアクセスすることができれば、これを行う方法を見つけました。

iframeを使用しているウェブページを制御すると、うまくいくとわかった方法の1つは、IFRAMEでないコンテンツ全体をiframeページの中にdivで囲むことです。タグの直後にタグを配置します。

次に、iframeがあればSafariモバイルをテストします。

browser_=/iPhone|iPad/i.test(navigator.userAgent); 
isInIframe = (window.location != window.parent.location) ? true : false; 

それがこの基準を満たしている場合、あなたはインラインフレームの高さがあることと、autoにdiv要素のオーバーフローを設定すべきかにフレームページ内に配置さのdivの高さを設定します。これは、それがiframeであるという錯覚を作り出します。今

、あなたはjQueryのを使用する要素（ウィンドウ）またはそのような何かを持っている場合は、少なくとも最後のではなく、ウィンドウので、代わりにDIVを使用するように切り替えるようにしてください

<div style="-webkit-overflow-scrolling:touch; overflow: auto;"> 

にiframeタグをラップ（ iframe）は自動的に展開され、iframeが既に展開されているため、あまり役に立ちません。

Answer 2

は難しい苦労した後、最後に、私は次のようにios.Doでそれをiframeのスクロールを作るための方法を発見した：

だけのdivにはiframeを置く（コンテナとして動作する要素のようなDIV） としてスタイルを適用しますこれは完全に機能します。

.iframe { 
    overflow: scroll !important; 
    width: 100%; 
    height: 100%; 
    border: none; 
} 

.div { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    border: none; 
    background-color: #FFF; 
} 

私はGWTで働いているので、ここでGWTの人々のための提案です。 GWTの場合は、iframeをScrollPanel（div）に配置し、上記のようにスタイルを適用するだけです。

Answer 3

最初に私は以下のコードをIframeに使用しましたが、これはすべてのウェブサイトとAndroidのmobileapp、iphone以外のipadで動作します。一方、iPhoneのボタンをクリックして動作していないans CSSが妨害を取得します。

<iframe class ="holds-the-iframe" src="http://stackoverflow.com" style="width:100%; height:100%;" seamless="seamless" ></iframe>

その後、我々は、我々は2000pxからそれをSTRATとまだそれが動作し、幅= 100％に設定減少ここ最大である画素で高さを使用します。これはすべてのデバイスで有効です。

<iframe src="http://stackoverflow.com" style="width:100%;height:1500px;"></iframe>