web-dev-qa-db-ja.com

Mobile SafariのiFrameでPDFを表示する際の問題

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月

何時間もの探索と実験の後、私はこの問題が本当に混乱だと結論付けることができます!!多くの解決策がありますが、それぞれが完璧とはほど遠いものです。これに苦労している他の人は、「 iPad上のiFrameの問題の戦略 」を参照することをお勧めします。私にとっては、これを書き留めて、iPadユーザー向けの別のソリューションを探す必要があります。

更新-2015年5月

この質問の簡単な更新。最近、Googleドライブビューアの使用を開始しました。これにより、元の問題がほぼ解決されました。 PDFドキュメントへの完全なパスを指定すると、GoogleはPDF（embedded=true ）。例.

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

これを小さなビューポートのフォールバックとして使用し、上記のリンクを<iframe>に埋め込むだけです。

iosipadpdfiframemobile-safari
41
QFDev

新しい解決策を見つけました。 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>
10
Wes Reimer

試してくださいpdf.jsはモバイルサファリ内でも動作するはずです。 https://github.com/mozilla/pdf.js/

2
Mike

これに対する私の解決策は、モバイルではGoogleドライブを使用し、大きな画面では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
froggomad