在 Mobile Safari 上的 iFrame 中显示 PDF 的问题答案

【问题标题】：Problems displaying PDF in iFrame on Mobile Safari在 Mobile Safari 上的 iFrame 中显示 PDF 的问题
【发布时间】：2013-03-07 00:35:08
【问题描述】：

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

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

我将其用作较小视口的后备方案，并将上述链接嵌入到我的<iframe>。

【问题讨论】：

关于您的“更新 - 2015 年 5 月” - Google Drive 查看器解决方案对我来说效果很好，似乎已经解决了我们遇到的 IOS Safari 和 Android 问题。谢谢！
当在不同来源的 iFrame 上引用 Google Drive 时，这是如何工作的？我在尝试嵌入 Google 云端硬盘链接时收到 'X-Frame-Options' to 'sameorigin'. 错误。
我以为这会解决我的问题，但我使用 Google 收到 Preview not available 的次数太多了：/
“iPad 上 iFrame 问题的策略”的链接现已过时，似乎已移至此处：blogs.magnolia-cms.com/christopher-zimmermann/…
天啊，这个答案太棒了。它从字面上解决了在移动 safari 和 ios 中查看 pdf 的问题。 +10000000 给你。

标签： ios ipad pdf iframe mobile-safari

【解决方案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>

【讨论】：

你救了我的命，仍然在 iOS 10 上 iFrame 呈现为 img
另外，因为它呈现为图像并且只显示第一页，我最初的想法是保存为图像，但是图像在相机胶卷中是空白的。不是很有帮助。

【解决方案2】：

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

【讨论】：

迟到了，但我已经在 iOS 上测试 PDF.js 有一段时间了，这很痛苦。性能非常糟糕，而且对于大型文档，它会占用大量内存，导致浏览器崩溃。

【解决方案3】：

我对此的解决方案是在移动设备上使用谷歌驱动器，并在大屏幕上使用嵌入 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>

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

为了在 2021 年使用 google 预览，我必须执行以下操作。对上面的发布方式进行了一些小的调整。

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

【讨论】：

【解决方案6】：

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

【讨论】：