ios - 在 Mobile Safari 上的 iFrame 中显示 PDF 时出现问题

Question

在我们的 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 viewer，基本解决了原来的问题。只需提供 PDF 文档的完整路径，Google 就会返回 PDF 的 HTML 格式解释(不要忘记设置 embedded=true )。例如

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

我将其用作较小视口(viewport)的后备，并将上述链接简单地嵌入到我的 <iframe> 中.

Answer 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.width="100%";
};
</script>