iPadのIFRAMEとSafari、ユーザーはどのようにコンテンツをスクロールできますか？
Apple iOSマントラによれば、IFRAMEの内容を2本の指でドラッグすることでスクロールできるはずです。残念ながらiPadで最新バージョンのiOSを実行すると、この方法を使用してスクロールするIFRAMEを備えた単一のWebサイトはまだ見つかりません。スクロールバーも表示されません。
ユーザーがモバイルSafariでIFRAMEのコンテンツをスクロールする方法を知っていますか？
iOS 5では、スクロールが機能するように親divに追加できる次のスタイルが追加されました。
-webkit-overflow-scrolling:touch
-webkit-overflow-scrolling:touch回答で述べたように、実際の解決策です。
<div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
<iframe src="YOUR_PAGE_URL" width="600" height="400"></iframe>
</div>
ただし、下の画像に示すようにiframe内で上下にスクロールできない場合は、 
このように斜めに2本の指でスクロールしてみてください。
私の場合、これは実際に機能したので、まだ解決策が見つからない場合は共有してください。
Iframeが適切に表示およびスクロールされるようには見えません。オブジェクトタグを使用して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 からコピーしました。クレジットは完全に匿名の著者に帰属します。
<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値の組み合わせ：自動; ＆-webkit-overflow-scrolling：タッチ;
問題のiframeとその親divの両方に適用すると機能します
非タッチブラウザでのダブルスクロールバーの不幸な副作用。
私が使用した解決策は、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（）は次のように定義されています...
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システムではテストされていません2）タブレットのAndroidブラウザーではテストされていません。追加の変更が必要な場合があります
（したがって、この解決策は完全ではないかもしれません）
これはiPadでiframeスクロールを動作させるためにしたことです。このソリューションは、iframe内に表示されるhtmlを制御する場合にのみ機能することに注意してください。
実際にデフォルトの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"
});
このソリューションを使用してTinyMCE（ワードプレスエディター）をiPadで適切にスクロールしました。
以下のコードは私のために機能します（彼のブログ投稿のためにクリストファー・ツィンマーマンに感謝します http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad -問題/ ）。問題は次のとおりです。
- スクロールできることをユーザーに知らせるスクロールバーはありません。
- ユーザーは2本指のスクロールを使用する必要があります
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>
この記事 に基づいて、非常に基本的な機能を提供する次のスニペットをまとめました。
<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>
明らかにそれは完璧からはほど遠い（ページの高さを実質的に無限に拡張することを考えると）が、これは私がこれまでに見つけた唯一の実行可能な回避策です。
問題
everything（literally）が複数レベルのiframeにネストされている、大きくて複雑で乱雑な古いサイトの維持を支援します。 src。これにより、次の課題が生じます。
- HTML構造の変更は、何年も触れられていないスクリプトやスタイルシートを壊す危険性があります。
- すべてのiframeおよびsrcドキュメントを手動で検索して修正するには、時間と労力がかかりすぎます。
これまでに投稿されたソリューションのうち、 this がチャレンジ1を克服した唯一のソリューションです。残念ながら、一部のiframeで機能しないようです。グリッチ（応答しないリンクやフォームコントロールなど、ページに他のバグを引き起こすようです）。
解決策
上記があなたの状況のように聞こえる場合、次のスクリプトを試してみてください。ネイティブのスクロールを無視し、代わりにすべてのiframeをビューポートの境界内でドラッグ可能にします。トップレベルのiframeを含むドキュメントに追加するだけです。必要に応じて、それらとその子孫に修正を適用します。
動作する fiddle *があり、コードは次のとおりです。
(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では、テスト目的でマウスのサポートが有効になっています。実稼働サイトでは、mouse = falseに設定する必要があります。
これまでのところ、私が試したときに完全に機能するソリューションはありませんでしたが（セカンダリロードでバグがある場合もあります）、回避策として、ここで説明したようにオブジェクト要素を使用し、スクロール可能なdivにラップしてから、オブジェクトを非常に高さ（5000px）は私のために仕事をしました。それは大きな回避策であり、信じられないほどうまく機能しません（まず、5000pxを超えるページで問題が発生します-10000pxは私にとっては完全に壊れました）が、それは私のテストケースのいくつかで仕事を成し遂げているようです：
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>';
}
AppleがSafari iFrameの問題を解決することを期待しています。