iframeのipad safariでの表示

5003 ワード

今日はウェブサイトやローカルHTMLをネストし、iframeを使い、パソコンにscrolling=「auto」を設定し、幅の高さ、スクロールバーが表示されます.ipadにはページ全体の幅の高さがすべて表示されます.scrollingプロパティが無効です.html 5のiframeにはsrcの属性しか残っていませんでした.ただしscrolling=‘no’を設定.やはり有効になります.ページには、定義された高さと幅のサイズのみが表示されます.overflow:hiddenを設定しても無駄です.ipad safariのiframeの内容を固定サイズでスクロールできるようにするにはどうすればいいですか?ネット上ではseamless属性を使うと言っています.直接seamlessを書きます.しかし、この属性ipadのsafariはサポートされていません.chromeはサポートされています. IE6 – Windows: no support IE7 – Windows: no support IE8 – Windows – Windows: no support IE9 beta – Windows: no support Firefox 3.6 – Windows: no support Firefox 3.6 – OSX: no support Firefox 4.0 – beta Windows: no support Firefox 4.0 – beta OSX: no support Safari OSX: no support Chrome 7 – Windows: no support Chrome7–Windows:no support Chrome 9–OSX:no support Opera 11–OSX:no supportテスト例:http://www.maxdesign.com.au/jobs/example-seamless/したがって,以上の方法ではipad safariにおけるiframeスクロールの問題を解決することはできない.解決方法:iframeにdivを追加し、スタイルを設定します-webkit-overflow-scrolling:touch;overflow: scroll;divを超えたコンテンツをtouchでスクロールできるようにします.また、iframeのsrcがURLではなくローカルhtmlの場合、HTMLのDOMにリスニングイベントを追加し、htmlのbodyがtouchイベントをリスニングし、ネストされたhtmlもスクロールできるようにする必要があります.
 
    var toScrollFrame = function(iFrame, mask) {  
                        if (!navigator.userAgent.match(/iPad|iPhone/i))  
                            return false;  
                        //do nothing if not iOS devie  
      
                        var mouseY = 0;  
                        var mouseX = 0;  
                        jQuery(iFrame).ready(function() {//wait for iFrame to load  
                            //remeber initial drag motition  
                            jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {  
                                mouseY = e.targetTouches[0].pageY;  
                                mouseX = e.targetTouches[0].pageX;  
                            });  
      
                            //update scroll position based on initial drag position  
                            jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {  
                                e.preventDefault();  
                                //prevent whole page dragging  
      
                                var box = jQuery(mask);  
                                box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);  
                                box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);  
                                //mouseX and mouseY don't need periodic updating, because the current position  
                                //of the mouse relative to th iFrame changes as the mask scrolls it.  
                            });  
                        });  
      
                        return true;  
                    };  
      
                    toScrollFrame('.myFrame', '.myMask');  

 
 
 
最終コード
    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
            <meta name="apple-mobile-web-app-capable" content="yes">  
            <meta name="apple-mobile-web-app-status-bar-style" content="black">  
            <title>wrapScroller demo</title>  
            <link rel="stylesheet" href="../style/wrapScroller.css" type="text/css" media="screen" />  
            <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>  
            <script type="text/javascript">  
                  
            </script>  
        </head>  
        <body style="background: #ccc;">  
            <div>  
                HEADER - use 2 fingers to scroll contents:  
            </div>  
            <div id="scrollee" style="width:300px;height:300px;-webkit-overflow-scrolling:touch; overflow: scroll;">  
                <iframe id="object" height="90%" width="100%" type="text/html" src="http://en.wikipedia.org/"></iframe>  
            </div>  
        </body>  
    </html>  

 
参照先:http://stackoverflow.com/questions/6139564/iframe-size-on-ipad http://jsfiddle.net/CobaltBlueDW/zHR8s/ http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute