IFRAME和iPad上的Safari,用户如何滚动内容?

根据苹果iOS的口头禅,应该可以通过用两根手指来拖动IFRAME的内容。 不幸的是,在iPad上运行iOS的最新版本,我还没有find一个网站的IFRAME滚动使用这种方法 – 没有滚动条出现。

有谁知道如何用户应该滚动移动Safari的IFRAME的内容?

12 Solutions collect form web for “IFRAME和iPad上的Safari,用户如何滚动内容?”

iOS 5添加了以下样式,可以添加到父div,以便滚动。

-webkit-overflow-scrolling:touch

-webkit-overflow-scrolling:touch在答案中提到的事实上是可能的解决scheme。

 <div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;"> <iframe src="YOUR_PAGE_URL" width="600" height="400"></iframe> </div> 

但是,如果您无法在iframe中上下滚动,如下图所示, 在这里输入图像描述

你可以尝试像这样对angular地用2个手指滚动,

在这里输入图像描述

这实际上在我的情况下工作,所以只是分享它,如果你还没有find一个解决scheme。

不会出现iframe显示和正确滚动。 您可以使用一个对象标签来replace一个iframe,内容可以用2个手指来滚动。 这是一个简单的例子:

 <html> <head> <meta name="viewport" content="minimum-scale=1.0; maximum-scale=1.0; user-scalable=false; initial-scale=1.0;"/> </head> <body> <div>HEADER - use 2 fingers to scroll contents:</div> <div id="scrollee" style="height:75%;" > <object id="object" height="90%" width="100%" type="text/html" data="http://en.wikipedia.org/"></object> </div> <div>FOOTER</div> </body> </html> 

这不是我的答案,但我只是从https://gist.github.com/anonymous/2388015复制它,只是因为答案是可怕的,并完全解决了这个问题&#x3002; 信用完全交给匿名作者。

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ if (/iPhone|iPod|iPad/.test(navigator.userAgent)) $('iframe').wrap(function(){ var $this = $(this); return $('<div />').css({ width: $this.attr('width'), height: $this.attr('height'), overflow: 'auto', '-webkit-overflow-scrolling': 'touch' }); }); }) </script> 

正如其他文章中提到的,溢出的css值的组合:auto; &-webkit-overflow-scrolling:touch;

适用于有问题的iframe和其父母div的作品

在非触摸式浏览器上使用双滚动条的不幸的副作用。

我使用的解决scheme是通过JavaScript / jQuery添加这些CSS值。 这使我可以为所有浏览器使用基本的CSS

 if (isSafariBrowser()){ $('#parentDivID').css('overflow', 'auto'); $('#parentDivID').css('-webkit-overflow-scrolling', 'touch'); $('#iframeID').css('overflow', 'auto'); $('#iframeID').css('-webkit-overflow-scrolling', 'touch'); } 

isSafariBrowser()被定义为foll …

 var is_chrome = navigator.userAgent.indexOf('Chrome') > -1; var is_safari = navigator.userAgent.indexOf("Safari") > -1; function isSafariBrowser(){ if (is_safari){ if (is_chrome) // Chrome seems to have both Chrome and Safari userAgents return false; else return true; } return false; } 

这允许我的应用程序在iPad上工作注1)未在其他ios系统上testing2)没有在平板电脑上的Android浏览器上testing过,可能需要额外的更改

(所以这个解决scheme可能不完整)

下面的代码适用于我(感谢Christopher Zimmermann的博客文章http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-if​​rame-on-the-ipad-problem/ ) 。 问题是:

  1. 没有滚动条让用户知道他们可以滚动
  2. 用户必须使用双指滚动
  3. PDF文件不居中(仍在工作)

     <!DOCTYPE HTML> <html> <head> <title>Testing iFrames on iPad</title> <style> div { border: solid 1px green; height:100px; } .scroller{ border:solid 1px #66AA66; height: 400px; width: 400px; overflow: auto; text-align:center; } </style> 

     <table> <tr> <td><div class="scroller"> <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> </div> </td> <td><div class="scroller"> <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> </div> </td> </tr> <tr> <td><div class="scroller"> <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> </div> </td> <td><div class="scroller"> <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe> </div> </td> </tr> </table> <div> Here are some additional contents.</div> 

这就是我所做的,以获得iframe滚动iPad的工作。 请注意,此解决scheme只有在您控制iframe中显示的html时才有效。

它实际上closures了默认的iframe滚动,而是使iframe内的body标签滚动。

main.html

 <!DOCTYPE html> <html> <head> <style type="text/css"> #container { position: absolute; top: 50px; left: 50px; width: 400px; height: 300px; overflow: hidden; } #iframe { width: 400px; height: 300px; } </style> </head> <body> <div id="container"> <iframe src="test.html" id="iframe" scrolling="no"></iframe> </div> </body> </html> 

test.html

 <!DOCTYPE html> <html> <head> <style type="text/css"> html { overflow: auto; -webkit-overflow-scrolling: touch; } body { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 8px; } </style> </head> <body> … </body> </html> 

如果您愿意,也可以使用jQuery来完成:

 $("#iframe").contents().find("body").css({ "height": "100%", "overflow": "auto", "-webkit-overflow-scrolling": "touch" }); 

我用这个解决scheme让TinyMCE(WordPress的编辑器)在iPad上正确滚动。

基于这篇文章 ,我将下面的代码片段放在一起,提供了一些非常基本的function:

 <div id = "container"></div> <script> function setPDFHeight(){ $("#pdfObject")[0].height = $("#pdfObject")[0].offsetHeight; } $('#container').append('<div align="center" style="width: 100%; height:100%; overflow: auto !important; -webkit-overflow-scrolling: touch !important;">\ <object id="pdfObject" width="100%" height="1000000000000" align="center" data="content/lessons/12/t.pdf" type="application/pdf" onload="setPDFHeight()">You have no plugin installed</object></div>'); </script> 

显然,它远非完美(鉴于它实际上将页面高度扩展到无穷大),但它是迄今为止唯一可行的解​​决方法。

到目前为止,我尝试过的解决scheme中没有一个完全适用于我(有时候,只有次级加载时有bug),但是作为解决方法,使用如此处所述的对象元素,然后将其包装在可滚动的div中,然后将对象设置为非常高度(5000px)为我做了这份工作。 这是一个很大的解决方法,并不能令人难以置信地工作(对于初学者来说,超过5000像素的页面会导致问题 – 但是10000px完全破坏了它),但似乎在我的一些testing用例中完成了这项工作:

 var style = 'left: ...px; top: ...px; ' + 'width: ...px; height: ...px; border: ...'; if (isIOs) { style += '; overflow: scroll !important; -webkit-overflow-scrolling: touch !important;'; html = '<div style="' + style + '">' + '<object type="text/html" data="http://example.com" ' + 'style="width: 100%; height: 5000px;"></object>' + '</div>'; } else { style += '; overflow: auto;'; html = '<iframe src="http://example.com" ' + 'style="' + style + '"></iframe>'; } 

希望苹果能够解决Safari iFrame问题。

问题

我帮助维护一个大的,复杂的,凌乱的旧网站,其中一切 (字面上)嵌套在多个层次的iframe中 – 其中许多是dynamic创build的和/或具有dynamicsrc。 这造成了以下挑战:

  1. 对HTML结构的任何更改都有可能会破坏多年未触及的脚本和样式表。
  2. 手动查找并修复所有的iframe和src文件将花费太多的时间和精力。

到目前为止发布的解决scheme中, 这是我见过的唯一一个克服了挑战1的问题。不幸的是,它似乎并不适用于某些iframe,当它出现时,滚动非常糟糕(这似乎会导致其他页面上的错误,如无响应的链接和表单控件)。

解决scheme

如果上述听起来像你的情况,你可能想要尝试下面的脚本。 它放弃原生滚动,而是使所有的内联框架在其视口范围内可拖动。 您只需将其添加到包含顶级iframe的文档; 它将根据需要将修补应用于他们及其后代。

这里有一个工作小提琴 *,这是代码:

 (function() { var mouse = false //Set mouse=true to enable mouse support , iOS = /iPad|iPhone|iPod/.test(navigator.platform); if(mouse || iOS) { (function() { var currentFrame , startEvent, moveEvent, endEvent , screenY, translateY, minY, maxY , matrixPrefix, matrixSuffix , matrixRegex = /(.*([\.\d-]+, ?){5,13})([\.\d-]+)(.*)/ , min = Math.min, max = Math.max , topWin = window; if(!iOS) { startEvent = 'mousedown'; moveEvent = 'mousemove'; endEvent = 'mouseup'; } else { startEvent = 'touchstart'; moveEvent = 'touchmove'; endEvent = 'touchend'; } setInterval(scrollFix, 500); function scrollFix() {fixSubframes(topWin.frames);} function fixSubframes(wins) {for(var i = wins.length; i; addListeners(wins[--i]));} function addListeners(win) { try { var doc = win.document; if(!doc.draggableframe) { win.addEventListener('unload', resetFrame); doc.draggableframe = true; doc.addEventListener(startEvent, touchStart); doc.addEventListener(moveEvent, touchMove); doc.addEventListener(endEvent, touchEnd); } fixSubframes(win.frames); } catch(e) {} } function resetFrame(e) { var doc = e.target , win = doc.defaultView , iframe = win.frameElement , style = getComputedStyle(iframe).transform; if(iframe===currentFrame) currentFrame = null; win.removeEventListener('unload', resetFrame); doc.removeEventListener(startEvent, touchStart); doc.removeEventListener(moveEvent, touchMove); doc.removeEventListener(endEvent, touchEnd); if(style !== 'none') { style = style.replace(matrixRegex, '$1|$3|$4').split('|'); iframe.style.transform = style[0] + 0 + style[2]; } else iframe.style.transform = null; iframe.style.WebkitClipPath = null; iframe.style.clipPath = null; delete doc.draggableiframe; } function touchStart(e) { var iframe, style, offset, coords , touch = e.touches ? e.touches[0] : e , elem = touch.target , tag = elem.tagName; currentFrame = null; if(tag==='TEXTAREA' || tag==='SELECT' || tag==='HTML') return; for(;elem.parentElement; elem = elem.parentElement) { if(elem.scrollHeight > elem.clientHeight) { style = getComputedStyle(elem).overflowY; if(style==='auto' || style==='scroll') return; } } elem = elem.ownerDocument.body; iframe = elem.ownerDocument.defaultView.frameElement; coords = getComputedViewportY(elem.clientHeight < iframe.clientHeight ? elem : iframe); if(coords.elemTop >= coords.top && coords.elemBottom <= coords.bottom) return; style = getComputedStyle(iframe).transform; if(style !== 'none') { style = style.replace(matrixRegex, '$1|$3|$4').split('|'); matrixPrefix = style[0]; matrixSuffix = style[2]; offset = parseFloat(style[1]); } else { matrixPrefix = 'matrix(1, 0, 0, 1, 0, '; matrixSuffix = ')'; offset = 0; } translateY = offset; minY = min(0, offset - (coords.elemBottom - coords.bottom)); maxY = max(0, offset + (coords.top - coords.elemTop)); screenY = touch.screenY; currentFrame = iframe; } function touchMove(e) { var touch, style; if(currentFrame) { touch = e.touches ? e.touches[0] : e; style = min(maxY, max(minY, translateY + (touch.screenY - screenY))); if(style===translateY) return; e.preventDefault(); currentFrame.contentWindow.getSelection().removeAllRanges(); translateY = style; currentFrame.style.transform = matrixPrefix + style + matrixSuffix; style = 'inset(' + (-style) + 'px 0px ' + style + 'px 0px)'; currentFrame.style.WebkitClipPath = style; currentFrame.style.clipPath = style; screenY = touch.screenY; } } function touchEnd() {currentFrame = null;} function getComputedViewportY(elem) { var style, offset , doc = elem.ownerDocument , bod = doc.body , elemTop = elem.getBoundingClientRect().top + elem.clientTop , elemBottom = elem.clientHeight , viewportTop = elemTop , viewportBottom = elemBottom + elemTop , position = getComputedStyle(elem).position; try { while(true) { if(elem === bod || position === 'fixed') { if(doc.defaultView.frameElement) { elem = doc.defaultView.frameElement; position = getComputedStyle(elem).position; offset = elem.getBoundingClientRect().top + elem.clientTop; viewportTop += offset; viewportBottom = min(viewportBottom + offset, elem.clientHeight + offset); elemTop += offset; doc = elem.ownerDocument; bod = doc.body; continue; } else break; } else { if(position === 'absolute') { elem = elem.offsetParent; style = getComputedStyle(elem); position = style.position; if(position === 'static') continue; } else { elem = elem.parentElement; style = getComputedStyle(elem); position = style.position; } if(style.overflowY !== 'visible') { offset = elem.getBoundingClientRect().top + elem.clientTop; viewportTop = max(viewportTop, offset); viewportBottom = min(viewportBottom, elem.clientHeight + offset); } } } } catch(e) {} return { top: max(viewportTop, 0) ,bottom: min(viewportBottom, doc.defaultView.innerHeight) ,elemTop: elemTop ,elemBottom: elemBottom + elemTop }; } })(); } })(); 

* jsfiddle启用了鼠标支持以进行testing。 在生产网站上,您需要设置mouse = false。

经过多次恶化之后,我发现了如何在我的ipad上滚动iframe。 秘密是在iframe区域的左边(也许稍微在边界之外)做垂直手指轻扫(单指细)。 在笔记本电脑或个人电脑上,滚动条在右侧,所以当然,我花了很多时间在我的ipad上尝试右手边的手指动作。 只有当我尝试左侧的IFRAME滚动。

添加overflow: auto; 风格和双指滚动应该工作。

  • Safari JS不能parsingYYYY-MM-DD的date格式?
  • 在Chrome和Safari中使用jQuery UI对话框的滚动条问题
  • 为什么一个Safari页面打破iOS渲染?
  • 为什么Safari在使用iOS 6设备进行远程debugging期间显示“无法检查应用程序”?
  • “-webkit-overflow-scrolling:touch”打破了css的3D视angular
  • 移除移动Safari(iPhone)上的textarea内部阴影
  • 使用jQuery在焦点上select文本不工作在Safari和Chrome
  • 在页面加载的第一个“焦点”事件Safari浏览器抖动/跳跃(bug?)
  • 在safari中不能使用CSS3animation
  • 在Safari中禁用弹性滚动
  • touchend事件属性