How to make scroll PDF in iFrame for iPAD Safari
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:
|
1 |
<iframe src="your-pdf-link.pdf"></iframe> |
That would be like this:
|
1 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 :
|
1 2 3 |
<div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;"> <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.
This post has already been read 6589 times!
Hey Mehedi,
I have protected PDF docs that need an authenticated session and I can’t use the google PDF viewer. Any idea for this case?
Thanks
Hi Balazs,
The best solution can be to protect the entire iframe code with condition or every time generate dynamic url for pdf with sessionID to place in google doc view.
Hope this helps. Thanks.