iframe在ipad safari的显示
今 天要在web中嵌套一個網址或本地HTML，用到了iframe，在電腦上設置scrolling=‘auto’，寬度高度，會有滾動條出現。而在 ipad上會全部顯示整個網頁的寬度高度。scrolling屬性無效。原來在html5中的iframe已經只有剩下src的屬性。?
但是若設置scrolling=‘no’.還是會生效的。頁面只顯示定義的高度和寬度的大小。設置overflow:hidden都沒用。?
怎么讓ipad safari 中的iframe的內容在固定大小中可滾動？?
網上說要用seamless屬性。直接寫個seamless。但是這個屬性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?
測試例子：?
http://www.maxdesign.com.au/jobs/example-seamless/?
所以以上方法都無法解決ipad safari中iframe滾動的問題。?
解決辦法：?
在iframe外加一層div，設置樣式-webkit-overflow-scrolling:touch; overflow: scroll;?
讓超出div的內容可以通過touch來滾動。?
另外，如果iframe的src不是網址，而是本地的html，則需要給HTML的DOM添加監聽事件，讓html的body可以監聽到touch事件，讓嵌套的html也可以滾動。
?
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
轉載于:https://www.cnblogs.com/jsonzheng/p/4023880.html
總結
以上是生活随笔為你收集整理的iframe在ipad safari的显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 笔记本电脑频繁自动重启_笔记本电脑自动重
- 下一篇： 新快现类似产品_小米全新折叠屏产品曝光，