项目要在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 会失去焦点 不知道为什么
<!DOCTYPE html><html><head> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> <title> – jsFiddle demo</title> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.6.2.js’></script> <link rel=”stylesheet” type=”text/css” href=”/css/normalize.css”> <link rel=”stylesheet” type=”text/css” href=”/css/result-light.css”> <style type=’text/css’> .myMask{ width: 316px; height: 416px; overflow: auto;}.myFrame{ width: 300px; height: 400px;} </style>
<script type=’text/javascript’>//<![CDATA[ $(window).load(function(){/** 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 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});//]]>
</script>
</head><body> <div class=’myMask’><iframe class=’myFrame’ src=’http://192.168.4.226/cloudSoft/cloudWeb/’ ></iframe></div> </body>
</html>