在Mobile Safari上的iFrame中显示PDF的问题 [英] Problems displaying PDF in iFrame on Mobile Safari

问题描述

在我们的网络应用程序中，我们使用以下代码行在 iframe 中显示PDF文档：

Within our web application we are displaying a PDF document in an iframe using the following line of code:

<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
                             style="width:100%; height:500px;"></iframe>

这适用于所有主流桌面浏览器，PDF缩放宽度适合限制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.

目前我无法在Mobile Safari中正确显示PDF。在这种情况下，只有PDF的左上部分是可见的，没有任何水平或垂直滚动​​条来查看文档的其余部分。

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.

是否有人知道我的解决方法移动Safari中的问题？

Does anybody know of I workaround for this problem in Mobile Safari?

更新 - 2013年3月

经过数小时的搜索和实验我可以得出结论，这个问题是一个真正的混乱！有很多解决方案，但每个解决方案都远非完美。任何其他人都在努力解决这个问题我建议你参考' iPad上iFrame的策略问题'。对我来说，我需要写下这个，并为我们的iPad用户寻找另一种解决方案。

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.

更新 - 2015年5月

只需对此问题进行快速更新。最近我开始使用Google Drive查看器，它主要解决了原始问题。只需提供PDF文档的完整路径，Google将返回PDF格式的HTML格式解释（不要忘记设置 embedded = true ）。例如

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.

https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf

我使用此作为较小视口的后备，只需将上述链接嵌入我的< iframe> 。

I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.

推荐答案

我找到了一个新的解决方案。从iOS 8开始，移动版Safari将PDF渲染为框架内HTML文档中的图像。然后，您可以在加载PDF后调整宽度：

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:

<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>

这篇关于在Mobile Safari上的iFrame中显示PDF的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！