Geek Answers Handbook

IFrame not loading on page load (jQuery Mobile)

I'm having trouble getting an iFrame to display the first time my loaded jQuery page loads.

I have an iFrame as follows:

<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>

And for some reason, when the page loads, the iFrame does not load with it. I can only see the PDF file if I REFRESH . Why is this?

Why is a PDF file not displayed in iFrame primarily without refreshing the page?

Thank you all for your understanding.

EDIT:

When I try to load a page from safari, I get the following warning:

Resource interpreted as Document but transferred with MIME type application/pdf.

Could this have anything to do with why PDF is not loading correctly?

+7
source share
2 answers

I just tried with rel = "external", it works without updating. The first link is an ajax call, and the second is not. it was blunt, not sure if I had lost anything else that you have.

page1.html

 <!DOCTYPE html> <html> <head> <title>Demo Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Demo Page</h1> </div> <div data-role="content"> <a href="page2.html" data-role="button">Another Page</a> <a href="page2.html" rel="external" data-role="button">View User Manual</a> </div> </div> </body> </html>

Page2.html

 <!DOCTYPE html> <html> <head> <title>Another Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" data-add-back-btn="true"> <iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe> <div data-role="header" data-theme="none"> <h1>Another Page</h1> </div> <div data-role="content" data-theme="none"> <p>This is another page, dude.</p> </div> </div> </body> </html>
+3
source

Since this is an ajax call, the iframe must be encoded differently. Check out this site, there are some solutions ... Site

small modification of the code on the website to open pdf.

page1.html

 <!DOCTYPE html> <html> <head> <title>Demo Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Demo Page</h1> </div><!-- /header --> <div data-role="content"> <!-- this is a regular page call--> <a href="page2.html" data-role="button">Another Page</a> <!-- the functionality for this page is defined in "javascript.js" --> <!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device --> <a href="#" id="perform-function" data-role="button" data-link="FocusFree.pdf">Perform Function</a> </div><!-- /content --> </div><!-- /page --> </body> </html>

Page2.html

 <!DOCTYPE html> <html> <head> <title>Another Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" data-add-back-btn="true"> <div data-role="header"> <h1>Another Page</h1> </div><!-- /header --> <div data-role="content"> <p>This is another page, dude.</p> </div><!-- /content --> </div><!-- /page --> </body> </html>

main.js

 $(document).ready(function(){ $('#perform-function').bind('click', function(){ // we're storing the link in an attribute // called 'data-link': var url = $(this).attr('data-link'); // create iframe if not there, comment display none to see it if ($('#temp-iframe').length === 0) { $('<iframe />').attr({ id: 'temp-iframe', name: 'temp-iframe', height: '100%', width: '100%' }).css({ position: 'absolute', left: '50%', bottom: 0 }).bind('load', function(){ }).appendTo('body'); } // call the url into the iframe $('#temp-iframe').attr('src', url); // jquerymobile already does this because the link is just "#" // but if you end up return false; }); });
+3
source

More articles:


All Articles