在 Mobile Safari 上的 iFrame 中显示 PDF 的问题
Posted
技术标签:
【中文标题】在 Mobile Safari 上的 iFrame 中显示 PDF 的问题【英文标题】：Problems displaying PDF in iFrame on Mobile Safari 【发布时间】：2013-03-07 00:35:08 【问题描述】：在我们的 Web 应用程序中，我们使用以下代码行在 iframe 中显示 PDF 文档：
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
这适用于所有主要桌面浏览器，PDF 的宽度缩放以适合 iFrame 的范围，垂直滚动条可查看文档中的所有页面。
目前，我无法让 PDF 在 Mobile Safari 中正确显示。在这种情况下，只有 PDF 的左上部分是可见的，没有任何水平或垂直滚动条来查看文档的其余部分。
有人知道我在 Mobile Safari 中解决此问题的方法吗？
更新 - 2013 年 3 月
经过数小时的搜索和实验，我可以得出结论，这个问题真是一团糟！！有很多解决方案，但每一个都远非完美。我建议任何其他为此苦苦挣扎的人参考'Strategies for the iFrame on the iPad Problem'。对我来说，我需要写下这个并为我们的 iPad 用户寻找另一种解决方案。
更新 - 2015 年 5 月
只是对这个问题的快速更新。最近开始使用 Google Drive 查看器，基本解决了原来的问题。只需提供 PDF 文档的完整路径，Google 就会返回对您的 PDF 的 html 格式解释（不要忘记设置 embedded=true）。例如
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
我将其用作较小视口的后备方案，并将上述链接嵌入到我的<iframe>。
【问题讨论】：
关于您的“更新 - 2015 年 5 月” - Google Drive 查看器解决方案对我来说效果很好，似乎已经解决了我们遇到的 ios Safari 和 android 问题。谢谢！ 当在不同来源的 iFrame 上引用 Google Drive 时，这是如何工作的？我在尝试嵌入 Google 云端硬盘链接时收到'X-Frame-Options' to 'sameorigin'. 错误。
我以为这会解决我的问题，但我使用 Google 收到 Preview not available 的次数太多了：/
“iPad 上 iFrame 问题的策略”的链接现已过时，似乎已移至此处：blogs.magnolia-cms.com/christopher-zimmermann/…
天啊，这个答案太棒了。它从字面上解决了在移动 safari 和 ios 中查看 pdf 的问题。 +10000000 给你。
【参考方案1】：
我找到了一个新的解决方案。从 iOS 8 开始，移动 Safari 将 PDF 呈现为框架内 HTML 文档中的图像。然后您可以在 PDF 加载后调整宽度：
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function()
this.document.getElementsByTagName("img")[0].style.;
;
</script>
【讨论】：
你救了我的命，仍然在 iOS 10 上 iFrame 呈现为 img 另外，因为它呈现为图像并且只显示第一页，我最初的想法是保存为图像，但是图像在相机胶卷中是空白的。不是很有帮助。【参考方案2】：尝试pdf.js 也应该在移动Safari 中工作：https://github.com/mozilla/pdf.js/
【讨论】：
迟到了，但我已经在 iOS 上测试 PDF.js 有一段时间了，这很痛苦。性能非常糟糕，而且对于大型文档，它会占用大量内存，导致浏览器崩溃。【参考方案3】：我对此的解决方案是在移动设备上使用谷歌驱动器，并在大屏幕上使用嵌入 iframe 的标准 pdf。
.desktop-pdf
display: none;
.mobile-pdf
display: block;
@media only screen and (min-width : 1025px)
.mobile-pdf
display: none;
.desktop-pdf
display: block;
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
</iframe>
</div>
</div>
【讨论】：
【参考方案4】：<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src="https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"
></iframe>
【讨论】：
【参考方案5】：为了在 2021 年使用 google 预览，我必须执行以下操作。对上面的发布方式进行了一些小的调整。
"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
【讨论】：
【参考方案6】：我遇到了同样的问题。我发现通过将焦点设置在输入上（不适用于 div 标签）会显示 pdf。
我通过添加一个隐藏的输入来修复它并将焦点设置在它上面。这种解决方法不会减慢应用程序的速度。
<html><head>
<script>
$(document).ready(function ()
$("#myiframe").load(function () setTimeout(function () $(".inputforfocus").focus(); , 100); );
);
</script></head>
<body>
<div class="main">
<div class="level1">Learning</div>
<input type="hidden" class="inputforfocus">
<div>
<iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
</div>
</div>
</body>
</html>
【讨论】：
以上是关于在 Mobile Safari 上的 iFrame 中显示 PDF 的问题的主要内容，如果未能解决你的问题，请参考以下文章
使用iOS 5 Mobile Safari自动播放音频，还有其他解决方法吗？
IFRAMEs 和 iPad 上的 Safari，用户如何滚动内容？
触摸事件仅在iPad iOS 11.4上的Mobile Safari中滚动时触发“一次”
从 iPad 上的列表中卸载页面时，如何防止 mobile-safari 跳转？