ipad中使用iframe的问题

EdwardSiCong 2011-09-07

项目要在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

*

*@paramiFrameStringACSS/jQuerySelectoridentifyingtheiFrametoscroll

*@parammaskStringACSS/jQuerySelectoridentifyingthemasking/wrapperobject

*@returnBooleantrueonsuccess,falseonfailure.

*/

vartoScrollFrame=function(iFrame,mask){

if(!navigator.userAgent.match(/iPad|iPhone/i))returnfalse;//donothingifnotiOSdevie

    $("#myMask").addClass("ipad");

    var mouseY = 0;

varmouseX=0;

jQuery(iFrame).ready(function(){//waitforiFrametoload

//remeberinitialdragmotition

jQuery(iFrame).contents()[0].body.addEventListener('touchstart',function(e){

mouseY=e.targetTouches[0].pageY;

mouseX=e.targetTouches[0].pageX;

});

//updatescrollpositionbasedoninitialdragposition

jQuery(iFrame).contents()[0].body.addEventListener('touchmove',function(e){

e.preventDefault();//preventwholepagedragging

varbox=jQuery(mask);

box.scrollLeft(box.scrollLeft()+mouseX-e.targetTouches[0].pageX);

box.scrollTop(box.scrollTop()+mouseY-e.targetTouches[0].pageY);

//mouseXandmouseYdon'tneedperiodicupdating,becausethecurrentposition

//ofthemouserelativetothiFramechangesasthemaskscrollsit.

});

});

returntrue;

};

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 会失去焦点  不知道为什么

相关推荐

翟浩浩Android / 0评论 2015-01-12