web-dev-qa-db-ja.com

iOSでのiframeのスクロールは解決されましたが、iframeページの表示は不完全です

IOSでiframeをスクロールしようとしていますが、成功しました。うまくスクロールできます。参照：

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

しかし、すべての解決策には問題があります：iframeページが完全に表示されていません...

IPhoneとiPadでテストしたところ、iframeページが途切れ途切れに表示されます。 enter image description here

何か案が？

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'scroll',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
    </script>
    <title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
html5cordovaiframeweb-applicationsjquery-plugins
7
Jove

私はdivと「絶対」スタイルの組み合わせを見つけました。nicescrollはchoppinesを修正します。

Iframeによって読み込まれたページにnicescrollを読み込む必要があります。同じページで、すべてのコンテンツをdiv（絶対スタイル）でラップします

  #content {   position:absolute; }

ラップされたdivコンテンツを使用してnicescrollをロードします。

  $(document).ready(function() {
    $("html").niceScroll("#content"); 
  });

コードを確認できるように、デモページにリンクします。 http://areaaperta.com/nicescroll/demo/iframe6.html

自動的に、iOSネイティブスクロールが使用されている場合、他のプラットフォームでは、nicescrollがアクティブになります。

IOS5.1を搭載したiPadでテストしました。

5
InuYaksa

このソリューションは少しハックですが、iOSでテストされ、正常に動作します。

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
    </object>       
</div>

基本的に、スクロールはDIVで正常に機能するため、オブジェクトタグを使用してページコードを埋め込みます。問題は、同一生成元ポリシーのため、ターゲットページのサイズを決定できないことです。巨大なページサイズを設定することは完全に機能することがわかりました（遅延や途切れに気付くことはありません...空白だけです）

クライアントOSを簡単に判別し、このコードをiOSデバイスにのみ追加できます。

6
user2619064

-webkit-transform:translate3d(0,0,0)をiframeスタイルとその中のすべての要素に追加して、ハードウェアアクセラレーションを強制してみてください。これにより、途切れが軽減されます。

メインページスタイル：

iframe {  -webkit-transform:translate3d(0,0,0); }

およびiframeスタイル：

p { -webkit-transform:translate3d(0,0,0); }
3
Jon Clagg

これは、フレーム内に比較的配置されたコンテンツの問題であることがわかりました。 position: relative;を削除するときにこの動作を取り除きます

1
Joakim Ekroos