ios 在 Mobile Safari 上的 iFrame 中显示 PDF 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15480804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems displaying PDF in iFrame on Mobile Safari
提问by QFDev
Within our web application we are displaying a PDF document in an iframeusing the following line of code:
在我们的 Web 应用程序中，我们iframe使用以下代码行显示 PDF 文档：
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.
这在所有主要的桌面浏览器中都可以正常工作，PDF 的宽度缩放以适应 iFrame 的范围和垂直滚动条以查看文档中的所有页面。
At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.
但是目前我无法在 Mobile Safari 中正确显示 PDF。在这种情况下，只有 PDF 的左上角部分是可见的，没有任何水平或垂直滚动条来查看文档的其余部分。
Does anybody know of I workaround for this problem in Mobile Safari?
有人知道我在 Mobile Safari 中解决了这个问题吗？
UPDATE - MARCH 2013
更新 - 2013 年 3 月
After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.
经过数小时的搜索和实验，我可以得出结论，这个问题真是一团糟！！有很多解决方案，但每一个都远非完美。我建议任何其他为此而苦苦挣扎的人参考“ iPad 问题上的 iFrame 策略”。对我来说，我需要把这个写下来，为我们的 iPad 用户寻找另一种解决方案。
UPDATE - MAY 2015
更新 - 2015 年 5 月
Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.
只是对这个问题的快速更新。最近开始使用Google Drive查看器，基本解决了原来的问题。只需提供 PDF 文档的完整路径，Google 就会返回对您的 PDF 的 HTML 格式解释（不要忘记设置embedded=true）。例如
I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.
我使用它作为较小视口的后备，并简单地将上面的链接嵌入到我的<iframe>.
回答by Wes Reimer
I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:
我找到了一个新的解决方案。从 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.width="100%";
};
</script>
回答by Mike
try pdf.jsshould also work inside mobile safari: https://github.com/mozilla/pdf.js/
尝试pdf.js也应该在移动 safari 中工作：https: //github.com/mozilla/pdf.js/
回答by froggomad
My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.
我的解决方案是在移动设备上使用谷歌驱动器，并在较大屏幕上使用嵌入在 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" width="100%" height="90%" 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" width="100%" height="90%" 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>
回答by user2387011
I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.
我遇到了同样的问题。我发现通过将焦点设置在输入上（不适用于 div 标签）显示 pdf。
I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.
我通过添加一个隐藏的输入来修复它并将焦点设置在它上面。这种解决方法不会减慢应用程序的速度。
<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>
