问题在于,当您必须使用IFrame将内容插入网站时,那么在现代网络世界中,预计IFrame也会响应.从理论上讲它很简单,只需要使用<iframe width="100%"></iframe>或设置CSS宽度,iframe { width: 100%; }但在实践中它并不是那么简单,但它可以.
如果iframe内容完全响应并且可以在没有内部滚动条的情况下自行调整大小,那么iOS Safari将调整大小而iframe没有任何实际问题.
如果您考虑以下代码:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>
使用Content.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: …根据Apple iOS的口头禅,应该可以通过用两根手指拖动来滚动IFRAME的内容.不幸的是,在iPad上运行最新版本的iOS我还没有找到一个带有IFRAME的网站,它使用这种方法滚动 - 没有滚动条出现.
有谁知道用户应该如何使用移动版Safari滚动IFRAME的内容？
我有一个iframe,我需要它有一个滚动溢出.它似乎在桌面上工作,我使用了一个解决方案,使其在iOS中工作.它现在适用于Android和iOS.但是,iOS8失败了.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
我正试图在iframe中嵌入HTML5游戏,以便在iPad和iPhone等移动设备上的浏览器中显示.
如果您直接在iPad上访问它们,它们可以正常工作.
但是如果你使用iframe嵌入它们,那么当你触摸游戏然后放手时,游戏就会暂停.
有没有办法阻止这种iframe行为,以便他们按照自己的意愿行事？
当你停止触摸并且它认为你的空置和停顿时,似乎可能会失去焦点？
例
在模拟器中尝试下面的两个示例链接,您将看到问题
iPhone/iPad模拟器:https://app.io/safari
直接游戏链接(游戏作品):http://static.tresensa.com/madcab/index.html？dr = A0000
嵌入式游戏链接(游戏不起作用):http://drttrd.com/testIframe.php
我正在使用的代码(基本)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
</head>
<body>
<div>
<iframe src="http://static.tresensa.com/madcab/index.html?dst=A0000" frameborder="0" scrolling="no" width="960" height="536"></iframe>
</div>
</body>
</html>
我试过的
css样式以更改交互类型
<div style="overflow:auto;-webkit-overflow-scrolling:touch;">
<iframe src="" height="" height=""></iframe>
</div>
JS防止默认
<script>
document.ontouchmove = function(e) {
e.preventDefault();
};
</script>
......都没有帮助
我object在html中有一个标记位置,如下所示:
<div class="viewport" id="pdf-viewport">
<object class="pdf-object" data="PDF_URL_HERE" type="application/pdf"></object>
</div>
我的桌面上的观看体验还可以,但我无法在移动设备上滚动pdf.如何添加此功能？我试过CSS和溢出但我想我错过了什么.
编辑
我尝试使用GoogleDocs/GoogleDrive在iFrame中嵌入pdf,但它给了我Preview not available太多次,所以它不可靠.
我有一个简单的html5页面,里面有3个div.如果我只允许第3个div滚动,我会得到一些可怕的滞后,触摸响应是很奇怪的.有任何想法吗？
<html>
<body style="overflow:hidden">
<div>
BLA1
</div>
<div>
BLA2
</div>
<div style="overflow: auto;">
BLA3 overflow is here
</div>
</body>
</html>
我正在寻找正确的方法来确保在ipad/iOS5上的iframe中滚动后动态显示的内容是可见的.
哦,Iframes和iPad - 你是多么美妙的老chesnut.我知道:
<iframe height="100%"> 因此它是无用的,因为它的大小不是容器的大小我需要将我的iframe包装在一个div中 - 一个la
<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>
我的问题是,iframe主体内部动态显示的内容(例如jquery选项卡,手风琴等)可能会导致浏览器在页面的显示范围内裁剪内容.
例如,如果我的"标签"大部分位于iframe内部的可见视口下方,我执行双指滚动(或实现单指scrollTop hack),然后将该内容滚动到视图中,其中一些内容是之前没有绘制的仍然未提取.再次单击第二个选项卡/后退会使内容显示为好像页面不绘制屏幕外内容.在此之后,如果我然后向上滚动到页面顶部,则不会为页面的开头绘制内容(之前可见).使用双指滚动向上和向下滚动页面可以解决问题.
我读过这篇文章,说明问题已得到解决.但它似乎没有完全修复; 并且仍然没有解决这个问题,因为你必须将你的iframe包装在div中并在该div上放置滚动条,桌面浏览器可能会显示双滚动条,具体取决于它们的解释方式overflow:auto.
ps我在iframe内外使用HTML5样板页面,并使用正确的元视口设置.
我无法在第一次加载jQuery移动支持页面时显示iFrame.
我有一个iFrame如下:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
由于某种原因,当页面加载时,iFrame无法加载它.如果我刷新页面,我只能看到PDF文件.这是为什么？
为什么没有页面刷新,PDF文件首先没有出现在iFrame中？
感谢大家的见解.
编辑:
当我尝试使用safari打开页面时,我收到以下警告:
Resource interpreted as Document but transferred with MIME type application/pdf.
这可能与PDF无法正确加载的原因有关吗？
这是问题,我有并且需要iframe网页.这个iframe必须具有一定的宽度/高度.这在iOS中不起作用,因为可爱的iOS决定忽略帧的高度属性并强制显示所有内容(混蛋!).
你如何让它成为一个普通的iframe？
我想展示嵌入在html中的pdf文档.我正在尝试这样的代码,但它显示我缺少插件错误.
但是如果我将相同的pdf文件拖到浏览器上,它就会很好地打开它.为什么要求在html文件中插件？
<object data="pdfobject.pdf#view=FitV" type="application/pdf" width="100%" height="100%"></object>
在iPad上查看时,Colorbox iframe内容无法滚动,请阅读以下内容:
https://github.com/jackmoore/colorbox/issues/41#issuecomment-5244379
当显示的网页大于从Ipad为彩色框设置的尺寸时,滚动功能被禁用和/或不存在.
有些人可能会建议一个手指或两个手指滚动,这不起作用.
预先要求:拥有一个Ipad,或者去当地的最佳购买
重现步骤:转到http://colorpowered.com/colorbox/core/example1/index.html 点击外部网页(Iframe)链接,在Google搜索中输入内容
结果:您无法滚动查看结果.
有没有解决这个问题？有什么工作可以解决这个问题吗？顺便说一下,这适用于IE,Chrome和Firefox.
任何一个团体为此工作了？任何帮助将不胜感激.