在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的范围,垂直滚动条可以查看文档中的所有页面.

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

有人知道我在Mobile Safari中解决这个问题吗？

更新 - 2013年3月

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

更新 - 2015年5月

只是这个问题的快速更新.最近我开始使用Google Drive查看器,它主要解决了原始问题.只需提供PDF文档的完整路径,Google将返回HTML格式的PDF解释(不要忘记设置embedded=true).例如

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

我正在使用它作为较小视口的后备,并简单地将上述链接嵌入到我的<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>

Answer 2

<iframe
              id="ifamePdf"
              type="application/pdf"
              scrolling="auto"
              src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
              height="600"
            ></iframe>

Answer 3

尝试pdf.js也应该在移动 Safari 中工作： https: //github.com/mozilla/pdf.js/