7

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

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

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

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

iPhoneとiPadでテストしたところ、iframeページが途切れ途切れに表示されます。 ここに画像の説明を入力してください

何か案が？

例：

<!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>
4

4 に答える 4

6

このソリューションはちょっとしたハックですが、テスト済みであり、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 デバイスにのみ追加できます。

于 2013-07-25T14:12:16.437 に答える
5

「絶対」スタイルの div と nicescroll の組み合わせがチョッピンを修正することを発見しました。

iframe によってロードされたページに nicescroll をロードする必要があります。同じページで、すべてのコンテンツを div でラップします (絶対スタイルを使用)

  #content {   position:absolute; }

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

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

コードを確認できるデモページへのリンク: http://areaaperta.com/nicescroll/demo/iframe6.html

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

iOS 5.1 を搭載した iPad でテストしました。

于 2013-01-08T20:40:05.200 に答える
3

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

メインページスタイル：

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

およびiframeスタイル：

p { -webkit-transform:translate3d(0,0,0); }
于 2013-01-07T03:54:57.223 に答える
1

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

于 2013-10-29T11:33:21.633 に答える