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