ipad中使用iframe的问题

项目要在ipad下测试，发现iframe设置的高度和宽度都没用了，被里面的内容撑开了，怎么办。

网上搜了下比较适应的方法

1.在iframe外包个div 设置div的高度、宽度和overflow:auto; 如果这时两个手指touchmove还是不生效的话就用这个了：

2.参考自：http://jsfiddle.net/CobaltBlueDW/zHR8s/

 

 #myMask.ipad{

    width: 316px;
    height: 416px;
    overflow: auto;
}
.myFrame{/*用于PC上，ipad貌似无视这个*/

    width: 300px;
    height: 400px;
}

  <div id='myMask'><iframe class='myFrame' src='../zHR8s' ></iframe></div>

 

 

/** toScrollFrame: turns a iframe wrapper into a scrollable masking region on iOS webkits
*
*   @param  iFrame  String   A CSS/jQuery Selector identifying the iFrame to scroll
*   @param  mask    String   A CSS/jQuery Selector identifying the masking/wrapper object
*   @return         Boolean  true on success, false on failure.
*/
var toScrollFrame = function(iFrame, mask){
    if(!navigator.userAgent.match(/iPad|iPhone/i)) return false; //do nothing if not iOS devie
    $("#myMask").addClass("ipad");

    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'); //add single-touch scrolling to example page

 

要先引入jQuery。

 

也有人提过用object代替iframe 

<object id="object" height="90%" width="100%" type="text/html" data="http://www.baidu.com">

</object>

 

ipad测试下在登录时遇到iframe 内容刷新 页面的input 会失去焦点  不知道为什么