<object> PDF 无法在移动设备上滚动
Posted
技术标签:
【中文标题】<object> PDF 无法在移动设备上滚动【英文标题】：<object> PDF not scrollable on mobile 【发布时间】：2018-08-11 01:53:31 【问题描述】：我在 html 中有一个 object 标记位置，如下所示：
<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 的次数太多，所以它不可靠。
【问题讨论】：
能否请您提供一些关于您的设备、操作系统版本、您正在使用的浏览器等的信息？ 我在我的 iPhone 上测试它，但这必须适用于所有移动（或几乎所有）设备，因为我们在现实世界使用应用程序中需要此功能 到目前为止，您尝试了哪些设备或模拟器？也许您遇到了极端情况。 我们正在 iphone 6/7/8、Safari 和 Chrome 上测试它，但它在那里不起作用。仅适用 这看起来是因为臭名昭著的 iphone css 溢出错误。请检查this 看看它会解决你的问题 【参考方案1】：有时在移动设备上的渲染会使某些元素成为“可选择的”，并且在您触摸它时不会应用滚动。
您可以尝试通过使用 css 设置溢出来强制滚动，如果它不起作用，您可以尝试添加一个覆盖创建一个具有透明背景、全宽和全高的 div
<!-- HTML -->
<div class="overlay">
</div>
//CSS
.overlay
width: 100%;
/* transparent background is set by default so no need to declare it supposedly */
然后，全高，将全高理解为全文档高度，可以使用：
// jQuery (you can even use javascript etc)
$(document).ready(function()
var height = $(document).height();
$('.overlay').height(height);
// or $('.overlay').css('height', height);
);
获得它。那么你必须能够正确滚动。 上周我已经阅读了很多关于不在移动设备上滚动的问题，但我真的不知道有什么意义可以让它 100% 确定。
希望对你有帮助。
【讨论】：
【参考方案2】：试试这个：
这就是我为使 iframe 滚动在 iPad 上工作所做的工作。请注意，此解决方案仅在您控制 iframe 中显示的 html 时才有效。
它实际上关闭了默认的iframe scrolling，而是使 iframe 内的 body 标签滚动。
Index.jsp
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container
position: absolute;
top: 50px;
left: 50px;
width: 100%;
height: 100%;
overflow: hidden;
</style>
</head>
<body>
<div id="container">
<iframe src="test.jsp" id="iframe" scrolling="no"></iframe>
</div>
</body>
</html>
test.jsp
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<!-- pdf present this location local storage.-->
<iframe id="iframe" scrolling="no" id="iframe" src="data/richh.pdf" />
<script>
$("#iframe").contents().find("body").css(
"height": "100%",
"overflow": "auto",
"-webkit-overflow-scrolling": "touch"
);
</script>
</body>
</html>
另请访问链接：
https://wordpress.org/support/topic/pdf-not-showing-not-scrolling-on-mobile/
【讨论】：
【参考方案3】：<iframe> 不是显示 PDF 的最佳方式（不要忘记与移动浏览器的兼容性，例如 Safari）。某些浏览器将始终在外部应用程序（或另一个浏览器窗口）中打开该文件。我发现的最佳和最兼容的方式有点棘手，但适用于我尝试过的所有浏览器（甚至已经过时了）：
保留您的<iframe>，但不要在其中显示PDF，它将被包含<object> 标记的HTML 页面填充。为您的 PDF 创建一个 HTML 包装页，它应该如下所示：
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
【讨论】：
以上是关于<object> PDF 无法在移动设备上滚动的主要内容，如果未能解决你的问题，请参考以下文章
PDF 嵌入在 <object> 或 <embed> 标记中未在 IE 11 中加载
<object> 带有 pdf 的标签在 firefox 中不起作用并且在 IE 中被弄乱了