Mobile Safari でスクロールを有効にして iFrame のサイズを制御する方法

Mobile Safari での iFrame 表示の課題を克服する

iFrame をモバイル Web アプリケーションに組み込もうとすると、次のような問題が発生することは珍しくありません。寸法を制御し、その範囲内でスクロールできるようにします。

制約寸法

予想に反して、iFrame 要素の高さと幅の属性を設定するだけでは、そのサイズが iPhone 画面に制限されません。代わりに、これを div 要素内に囲むことで、効果的なサイズの抑制が可能になります。

スクロール機能の有効化

ただし、div 制約を導入すると、iFrame 内でのスクロールが無効になります。これに対処するには、次の手順を実行できます:

iframe コンテンツ内:

• スクロールを開始するために親ウィンドウと通信する JavaScript 関数を実装します。タッチ イベントに基づきます。

親ウィンドウ (外部) iframe):

• JavaScript コードを iframe コンテンツに挿入します。
• iFrame を囲むスクロール可能な div を定義します。タッチ イベントが検出されると、スクロール位置の調整を計算し、それに応じて div のscrollTop プロパティまたはscrollLeft プロパティを更新します。

コード例:

JavaScript (iframe コンテンツ):

setTimeout(function() {
    var startY = 0, startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function(event) {
        parent.window.scrollTo(0, 1); // Trigger parent scrolling.
        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 (親ウィンドウ):

<div>

このアプローチにより、Mobile Safari の iFrame 内で制限されたサイズとスクロールの両方が可能になります。

iOS 6 アップデートに関する注意:

プラットフォームの変更により、このソリューションは iOS 6 では動作しない可能性があることに注意してください。 Remote Web Inspector も利用できなくなったため、デバイス上で JavaScript の問題をデバッグすることが困難になっています。

以上がMobile Safari でスクロールを有効にして iFrame のサイズを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。