50

iframeWeb アプリケーション内で、次のコード行を使用して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 の HTML 形式の解釈を返します (設定することを忘れないでくださいembedded=true)。例えば

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

これを小さなビューポートのフォールバックとして使用し、上記のリンクを<iframe>.

4

6 に答える 6

11

新しい解決策を見つけました。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-13T17:58:55.360 に答える
1 
<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>
于 2021-01-25T16:03:34.683 に答える