blocks|key|2556908|text|试试pdf.js也应该在移动safari中工作：https://github.com/mozilla/pdf.js/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2556909|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mozilla/pdf.js/^0|2|6|O|Y|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>try <code>pdf.js</code> should also work inside mobile safari: <a href="https://github.com/mozilla/pdf.js/" rel="nofollow">https://github.com/mozilla/pdf.js/</a></p>


blocks|key|1767796|text|我也有同样的问题。我发现，通过将焦点设置在输入上(不适用于div标记)，将显示pdf。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1767797|我通过添加一个隐藏的输入并设置焦点来修复它。这样做并不会减缓应用程序的速度。|1767798|<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>|code-block|syntax|javascript|1767799|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.</p>

<p>I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.</p>

<pre><code>&lt;html&gt;&lt;head&gt;
&lt;script&gt;
    $(document).ready(function () {
        $("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
    });
&lt;/script&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div class="main"&gt;
    &lt;div class="level1"&gt;Learning&lt;/div&gt;
    &lt;input type="hidden" class="inputforfocus"&gt;
    &lt;div&gt;
        &lt;iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|447887|text|我找到了一个新的解决方案。从iOS+8开始，mobile将PDF呈现为框架内的中的图像。然后，您可以在PDF加载之后调整宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|447888|<iframe+id="theFrame"+src="some.pdf"+style="height:1000px;+width:100%25;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload+=+function()+{
++++this.document.getElementsByTagName("img")[0].style.width="100%25";
};
</script>|code-block|syntax|javascript|447889|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:</p>

<pre><code>&lt;iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"&gt;&lt;/iframe&gt;
&lt;script&gt;
document.getElementById("theFrame").contentWindow.onload = function() {
    this.document.getElementsByTagName("img")[0].style.width="100%";
};
&lt;/script&gt;
</code></pre>


blocks|key|2556982|text|我的解决方案是在手机上使用谷歌驱动器，并在更大的屏幕上嵌入标准的pdf。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2556983|.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%25"+height="90%25"+type='application/pdf'+title="Title">
++++++++++++++++<p+style="font-size:+110%25;"><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%25"+height="90%25"+type='application/pdf'+title="Title">
++++++++++++++++<p+style="font-size:+110%25;"><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>|code-block|syntax|javascript|2556984|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.</p>

<pre><code>.desktop-pdf {
    display: none;
}

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

  .mobile-pdf {
      display: none;
  }

  .desktop-pdf {
      display: block;
  }
}

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


blocks|key|2556988|text|<iframe
++++++++++++++id="ifamePdf"
++++++++++++++type="application/pdf"
++++++++++++++scrolling="auto"
++++++++++++++src={"https://docs.google.com/viewerng/viewer?url="%2B"https://example.com/pdfdoc.pdf"%2B"&embedded=true"}
++++++++++++++height="600"
++++++++++++></iframe>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2556989|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;iframe
              id=&quot;ifamePdf&quot;
              type=&quot;application/pdf&quot;
              scrolling=&quot;auto&quot;
              src={&quot;https://docs.google.com/viewerng/viewer?url=&quot;+&quot;https://example.com/pdfdoc.pdf&quot;+&quot;&amp;embedded=true&quot;}
              height=&quot;600&quot;
            &gt;&lt;/iframe&gt;
</code></pre>


blocks|key|2557002|text|为了在2021年使用谷歌预览版，我不得不做以下工作。对上面张贴的方式做了一些小的调整。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2557003|"https://drive.google.com/viewerng/viewer?embedded=true&url="+%2B+encodeURIComponent(pdfUrl)|code-block|syntax|javascript|2557004|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.</p>
<pre><code>&quot;https://drive.google.com/viewerng/viewer?embedded=true&amp;url=&quot; + encodeURIComponent(pdfUrl)
</code></pre>


<p>Within our web application we are displaying a PDF document in an <code>iframe</code> using the following line of code:</p>

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

<p>This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.</p>

<p>At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.</p>

<p>Does anybody know of I workaround for this problem in Mobile Safari?</p>

<p><strong>UPDATE - MARCH 2013</strong> </p>

<p>After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to '<a href="https://blogs.magnolia-cms.com/christopher-zimmermann/detail~&amp;strategies-for-the-iframe-on-the-ipad-problem~.html" rel="noreferrer">Strategies for the iFrame on the iPad Problem</a>'. For me I need to write this one off and look for another solution for our iPad users. </p>

<p><strong>UPDATE - MAY 2015</strong></p>

<p>Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set <code>embedded=true</code>). e.g. </p>

<p><a href="https://drive.google.com/viewerng/viewer?embedded=true&amp;url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf" rel="noreferrer">https://drive.google.com/viewerng/viewer?embedded=true&amp;url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf</a></p>

<p>I'm using this as a fallback for smaller viewports and simply embedding the above link into my <code>&lt;iframe&gt;</code>.</p>


Problems displaying PDF in iFrame on Mobile Safari

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

在我们的web应用程序中，我们使用以下代码在iframe中显示一个PDF文档：<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"                              style="width:100%; height:...

问在移动Safari上用iFrame显示PDF的问题
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在移动Safari上用iFrame显示PDF的问题EN