iframe在ipad safari的显示
今 天要在web中嵌套一個(gè)網(wǎng)址或本地HTML，用到了iframe，在電腦上設(shè)置scrolling=‘a(chǎn)uto’，寬度高度，會(huì)有滾動(dòng)條出現(xiàn)。而在 ipad上會(huì)全部顯示整個(gè)網(wǎng)頁(yè)的寬度高度。scrolling屬性無效。原來在html5中的iframe已經(jīng)只有剩下src的屬性。?
但是若設(shè)置scrolling=‘no’.還是會(huì)生效的。頁(yè)面只顯示定義的高度和寬度的大小。設(shè)置overflow:hidden都沒用。?
怎么讓ipad safari 中的iframe的內(nèi)容在固定大小中可滾動(dòng)？?
網(wǎng)上說要用seamless屬性。直接寫個(gè)seamless。但是這個(gè)屬性ipad的safari不支持。chrome是支持的。?
IE6 – Windows: no support?
IE7 – Windows: no support?
IE8 – Windows – Windows: no support?
IE9 beta – Windows: no support?
Firefox 3.6 – Windows: no support?
Firefox 3.6 – OSX: no support?
Firefox 4.0 – beta Windows: no support?
Firefox 4.0 – beta OSX: no support?
Safari OSX: no support?
Chrome 7 – Windows: no support?
Chrome 7 – Windows: no support?
Chrome 9 – OSX: no support?
Opera 11 – OSX: no support?
測(cè)試?yán)?#xff1a;?
http://www.maxdesign.com.au/jobs/example-seamless/?
所以以上方法都無法解決ipad safari中iframe滾動(dòng)的問題。?
解決辦法：?
在iframe外加一層div，設(shè)置樣式-webkit-overflow-scrolling:touch; overflow: scroll;?
讓超出div的內(nèi)容可以通過touch來滾動(dòng)。?
另外，如果iframe的src不是網(wǎng)址，而是本地的html，則需要給HTML的DOM添加監(jiān)聽事件，讓html的body可以監(jiān)聽到touch事件，讓嵌套的html也可以滾動(dòng)。
?
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');?
?
?
最終代碼
?
參考：?
http://stackoverflow.com/questions/6139564/iframe-size-on-ipad?
http://jsfiddle.net/CobaltBlueDW/zHR8s/?
http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute
轉(zhuǎn)載于:https://www.cnblogs.com/jsonzheng/p/4023880.html
總結(jié)
以上是生活随笔為你收集整理的iframe在ipad safari的显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 笔记本电脑频繁自动重启_笔记本电脑自动重
- 下一篇： 新快现类似产品_小米全新折叠屏产品曝光，