问题上移动显示在iFrame的PDF Safari浏览器

在我们的Web应用中，我们在iframe使用下面的代码行中显示PDF文档：问题上移动显示在iFrame的PDF Safari浏览器

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

这适用于所有与宽度主要的桌面浏览器的罚款的PDF缩放以适应iFrame的范围和垂直滚动条以查看文档中的所有页面。

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

有没有人知道我在移动Safari中解决此问题的方法？

更新 - 2013年3月

后搜索和实验，我可以断定，这个问题是一个真正的混乱的时间！有一堆解决方案，但每一个都远非完美。任何其他人与这一个挣扎我建议参考'Strategies for the iFrame on the iPad Problem'。对于我来说，我需要写下这一段，为我们的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

我使用这个作为较小的视口回退，只是嵌入上面的链接到我的。

来源

2013-03-18 QFDev

关于“更新 - 2015年5月” - Google Drive查看器解决方案对我很好，似乎解决了我们遇到的IOS Safari和Android问题。谢谢！ – 2016-10-12 05:24:19

当在不同来源的iFrame上引用Google Drive时，这是如何工作的？尝试嵌入Google云端硬盘链接时，出现'X-Frame-Options'到'sameorigin'错误。 – vesperae 2017-09-13 18:44:08

我在想这样可以解决我的问题，但是我用'Google预览不可用'太多次了：/ – Ancinek 2018-03-05 11:04:45

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

来源

2013-09-09 18:28:02 Mike

晚会过后，我一直在iOS上测试PDF.js一段时间，这是痛苦的。性能非常可怕，而且对于大型文档，它会占用太多的内存，导致浏览器崩溃。 – 2014-11-20 17:05:39

-1

我得到了同样的问题。我发现通过将焦点设置为输入（不适用于div标签），将显示pdf。

我通过添加一个隐藏的输入并将焦点设置在它上面来解决它。此解决方案不会减慢应用程序。

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

来源

2014-04-18 15:45:09 user2387011

我找到了一个新的解决方案。从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>

来源

2015-03-13 17:58:55

您节省了我的时间，仍然在iOS 10上呈现iFrame img – garanda 2017-03-16 19:33:21

但它只显示PDF文档的第一页... – AlexAcc 2017-12-20 16:31:33

问题上移动显示在iFrame的PDF Safari浏览器

回答

相关问题