ios 在移动的Safari上的iFrame中显示PDF时出现问题

m2xkgtsf 于 12个月前发布在 iOS

关注(0)|答案(6)|浏览(463)

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

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

字符串
这在所有主要的桌面浏览器中都可以正常工作，PDF的宽度可以缩放到iFrame的范围内，垂直滚动条可以查看文档中的所有页面。
然而，目前我不能让PDF在移动的Safari中正确显示。在这种情况下，只有PDF的左上角部分是可见的，没有任何水平或垂直滚动条来查看文档的其余部分。
有人知道我在移动的Safari中解决这个问题的方法吗？

更新-2013年3月

经过几个小时的搜索和实验，我可以得出结论，这个问题是一个真实的烂摊子！！有一堆解决方案，但每一个都远不完美。任何人在这个问题上挣扎，我建议参考“Strategies for the iFrame on the iPad Problem”。对我来说，我需要把这个写掉，为我们的iPad用户寻找另一个解决方案。

更新-2015年5月

只是一个快速更新这个问题.最近我已经开始使用谷歌驱动器查看器，这基本上解决了原来的问题.只需提供一个完整的路径到PDF文档和谷歌将返回一个HTML格式的解释你的PDF（不要忘记设置embedded=true）.例如.
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf的
我将此作为较小视口的后备，并将上述链接嵌入到我的<iframe>中。

ios

来源：https://stackoverflow.com/questions/15480804/problems-displaying-pdf-in-iframe-on-mobile-safari

6条答案

按热度按时间

wqnecbli1#

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

字符串

赞(0）回复(0）举报 12个月前

ibps3vxo2#

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

字符串

赞(0）回复(0）举报 12个月前

d4so4syb3#

我的解决方案是在移动的上使用google drive，在大屏幕上使用内嵌在iframe中的标准pdf。

.desktop-pdf {
    display: none;
}

.mobile-pdf {
    display: block;
}
@media only screen  and (min-width : 1025px) {

  .mobile-pdf {
      display: none;
  }

  .desktop-pdf {
      display: block;
  }
}

    <div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
        <div class="pdf">
            <iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
            <iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
            </iframe>
        </div>
    </div>

字符串

赞(0）回复(0）举报 12个月前

xmjla07d4#

为了在2021年使用谷歌预览版，我不得不做以下事情。对上面发布的方式进行了一些小调整。

"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)

字符串

赞(0）回复(0）举报 12个月前

b4qexyjb5#

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

赞(0）回复(0）举报 12个月前

dy2hfwbg6#

我也遇到了同样的问题。我发现通过将焦点设置在输入上（不适用于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>

字符串

赞(0）回复(0）举报 12个月前

我来回答

ios 在移动的Safari上的iFrame中显示PDF时出现问题

6条答案

相关问题

热门标签

最新问答