项目要在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 会失去焦点 ?不知道为什么