There is an occasional bug for iPhone and iPad even they are designed as well and you will face lot of troubles with viewing a PDF inside an iframe. It does not seem to matter if viewing the PDF on Safari or any other mobile devices. The PDF would load into an iFrame, however it would not be scrollable. Ya !! That’s weird 🙁
There are many tutorials found online and many solutions come across but not satisfied as how i want. And finally i got solution to make work with Google PDF Viewer. 🙂
Meaning that if your iFrame code like this:
<iframe src="your-pdf-link.pdf"></iframe>
That would be like this:
<iframe src="https://docs.google.com/gview?url=your-pdf-link.pdf&embedded=true"></iframe>
Did you notice ? I have added https://docs.google.com/gview?url=
just before the PDF link and made it embedded=true
. Now you can check and i believe you can find it’s cool, yea 🙂
But what if, you already generated lots of PDF links (iFrame) in your site and there you thinking how can be make it automatic !!
yea.. my next code & scripts will help you to make it more simple you are thinking:
<script type="text/javascript"> jQuery(document).ready(function($) { $('iframe.hasPDF').each(function () { if ($(this).attr('href').toLowerCase().match(/\.(pdf)/g)) { var currentURL=$(this).attr('href'); var newURL = 'https://docs.google.com/gview?url='+currentURL+'&embedded=true'; $(this).attr('href', newURL) } }); }); </script>
See..how easy. Yes, its cool and don’t forget to change ‘hasPDF’ class with your iframe class name.
If you are using WordPress, then it would be more easy to set in footer through a hook. Just place this below code in your theme functions.php file:
function embed_gdocs_pdf() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('iframe.hasPDF').each(function () { if ($(this).attr('href').toLowerCase().match(/\.(pdf)/g)) { var currentURL=$(this).attr('href'); var newURL = 'https://docs.google.com/gview?url='+currentURL+'&embedded=true'; $(this).attr('href', newURL) } }); }); </script> <?php } add_action( 'wp_footer', 'embed_gdocs_pdf' );
Finally, one free tips if you are having problem with general TOUCH issue in your iPad (apple) devices where you must need to use -webkit-overflow-scrolling:touch
for parent tag.
How should be the HTML :
<div style="overflow:scroll ; -webkit-overflow-scrolling:touch ;"> <iframe src="YOUR-PAGE-LINK" width="600" height="400"></iframe> </div>
Hope this helps to resolve your iPad touch & scroll issue viewing PDF in iFrame.
Thanks.
What is Lead Capture: In general sense lead capture designates a process or way of…
Introduction Unlimited Modal POPUPS on MouseClick: Everyone knows about popup during site visits and most…
Brief about Pregnancy Calculator : This WordPress Pregnancy Calculator plugin allows users to display an…
Introduction About this Service Plugin: This Visual Composer Service Plugin works as an addon to…
Introduction of Dynamic Query String : This plugin allows user to set dynamic query string…
Introduction of OnClick Modal POPUP: Everyone knows about popup during site visits and most of…