在Mobile Safari的iFrame上显示PDF的问题

在我们的Web应用程序中,我们使用以下代码行在iframe中显示PDF文档:

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

这在所有主要的桌面浏览器都可以正常工作,PDF缩放的宽度可以放在iFrame的范围内,垂直滚动条可以查看文档中的所有页面。

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

有没有人知道我解决这个问题在移动Safari?

更新 – 2013年3月

经过几个小时的search和实验,我可以得出结论,这个问题是一个真正的混乱! 有一堆解决scheme,但每个都远远不够完美。 任何人都与这一个挣扎我build议参考“ 在iPad问题上的iFrame策略 ”。 对于我来说,我需要写下这个,为我们的iPad用户寻找另一个解决scheme。

更新 – 2015年5月

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

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

我使用这个作为更小的视口的后备,并简单地embedded上面的链接到我的<iframe>

我find一个新的解决scheme。 从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> 

尝试pdf.js也应该在移动Safari浏览器内工作: https : //github.com/mozilla/pdf.js/

我得到了同样的问题。 我发现通过设置input的重点(不使用div标签)PDF显示。

我通过添加一个隐藏的input来解决它,并把焦点放在它上面。 此解决scheme不会减慢应用程序。

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