Mobile Safari での iFrame 表示の課題を克服する
iFrame をモバイル Web アプリケーションに組み込もうとすると、次のような問題が発生することは珍しくありません。寸法を制御し、その範囲内でスクロールできるようにします。
制約寸法
予想に反して、iFrame 要素の高さと幅の属性を設定するだけでは、そのサイズが iPhone 画面に制限されません。代わりに、これを div 要素内に囲むことで、効果的なサイズの抑制が可能になります。
スクロール機能の有効化
ただし、div 制約を導入すると、iFrame 内でのスクロールが無効になります。これに対処するには、次の手順を実行できます:
iframe コンテンツ内:
- スクロールを開始するために親ウィンドウと通信する JavaScript 関数を実装します。タッチ イベントに基づきます。
親ウィンドウ (外部) iframe):
- JavaScript コードを iframe コンテンツに挿入します。
- iFrame を囲むスクロール可能な div を定義します。タッチ イベントが検出されると、スクロール位置の調整を計算し、それに応じて div のscrollTop プロパティまたはscrollLeft プロパティを更新します。
コード例:
JavaScript (iframe コンテンツ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | setTimeout( function () {
var startY = 0, startX = 0;
var b = document.body;
b.addEventListener( 'touchstart' , function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener( 'touchmove' , function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById( "scroller" );
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
|
ログイン後にコピー
HTML (親ウィンドウ):
このアプローチにより、Mobile Safari の iFrame 内で制限されたサイズとスクロールの両方が可能になります。
iOS 6 アップデートに関する注意:
プラットフォームの変更により、このソリューションは iOS 6 では動作しない可能性があることに注意してください。 Remote Web Inspector も利用できなくなったため、デバイス上で JavaScript の問題をデバッグすることが困難になっています。
以上がMobile Safari でスクロールを有効にして iFrame のサイズを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。