当前位置: 代码迷 >> Web前端 >> ipad中使用iframe的有关问题
  详细解决方案

ipad中使用iframe的有关问题

热度:360   发布时间:2012-09-01 09:33:02.0
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 会失去焦点 ?不知道为什么

  相关解决方案