ホームページ > ウェブフロントエンド > CSSチュートリアル > Mobile Safari でスクロールを有効にして iFrame のサイズを制御する方法

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

Linda Hamilton
リリース: 2024-11-13 06:32:02
オリジナル
966 人が閲覧しました

How to Enable Scrolling and Control iFrame Dimensions in Mobile Safari?

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); // 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 (親ウィンドウ):

1

<div>

ログイン後にコピー

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

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

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート