web-dev-qa-db-ja.com

<object> PDFモバイルではスクロールできません

次のようにobjectタグをHTMLに配置します。

<div class="viewport" id="pdf-viewport">
   <object class="pdf-object" data="PDF_URL_HERE" type="application/pdf"></object>
</div>

デスクトップでの表示は問題ありませんが、モバイルデバイスでPDFをスクロールできません。この機能を追加するにはどうすればよいですか？私はCSSを試してオーバーフローしましたが、何かが足りないようです。

[〜＃〜] edit [〜＃〜] GoogleDocs/GoogleDriveを使用してiFrameにpdfを埋め込もうとしましたが、それによりPreview not available回数が多すぎるため、信頼できません。

javascripthtmlcsspdf
14
Ancinek

これを試して：

これは、iPadでiframeスクロールを機能させるために行ったものです。このソリューションは、iframe内に表示されるhtmlを制御する場合にのみ機能することに注意してください。

実際にはデフォルトのiframe scrolling、代わりにiframe内のbodyタグをスクロールします。

Index.jsp

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

</style>
</head>
<body>

    <div id="container">
        <iframe src="test.jsp" id="iframe" scrolling="no"></iframe>
    </div>

</body>
</html>

test.jsp

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html { 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
}
body {
    height: 100%;
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 8px;
}
</style>
</head>
<body>
<!-- pdf present this location local storage.-->
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/richh.pdf" />
<script>
$("#iframe").contents().find("body").css({
    "height": "100%",
    "overflow": "auto", 
    "-webkit-overflow-scrolling": "touch"
});
</script>
</body>
</html>

リンクもご覧ください：

https://wordpress.org/support/topic/pdf-not-showing-not-scrolling-on-mobile/

1
k.swapnil

<iframe>は、PDFを表示するための最良の方法ではありません（たとえば、Safariなどのモバイルブラウザーとの互換性を忘れないでください）。一部のブラウザーは、常に外部アプリケーション（または別のブラウザーウィンドウ）私が見つけた最も互換性のある方法は少しトリッキーですが、試したすべてのブラウザーで動作します（かなり古いものでも）：

<iframe>を保持しますが、その中にPDFを表示しないでください。このタグは、<object>タグで構成されるHTMLページで埋められます。HTMLラッピングページを作成します。 PDFの場合、次のようになります。

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <embed src="your_url_to_pdf" type="application/pdf" />
    </object>
</body>
</html>
0
Ahsan Azwar

モバイルでのレンダリングでは、一部の要素が「選択可能」になり、タッチしたときにスクロールが適用されない場合があります。

CSSでオーバーフローを設定して強制スクロールを試すことができます。機能しない場合は、オーバーレイを追加して、透明な背景、全幅と高さのdivを作成できます。

<!-- HTML -->
<div class="overlay">
</div>

//CSS
.overlay{
  width: 100%;
  /* transparent background is set by default so no need to declare it supposedly */
}

次に、完全な高さ、完全な高さを完全なドキュメントの高さとして理解すると、次のように使用できます。

// jQuery (you can even use javascript etc)
$(document).ready(function(){
   var height = $(document).height();
   $('.overlay').height(height);
   // or $('.overlay').css('height', height);
});

それを得るために。次に、適切にスクロールできる必要があります。私は先週、モバイルでスクロールしないことについての多くの質問を読みました、そしてそれを100％確実にする理由がまだ何なのか本当にわかりません。

お役に立てば幸いです。

0
JoelBonetR