iFrame not loading on page load (jQuery Mobile)

Question

I am having trouble getting an iFrame to display the first time that my jQuery mobile backed 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 fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?

Why is the PDF file not showing up in the iFrame in the first place without a page refresh?

Thanks everyone for any insight.

EDIT:

When I try to ope the page with safari, I get the following warning:

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

Could that have something to do with why the PDF doesn't load correctly?

Any luck with this? does orientation trigger the pdf to display? — Jon Wells, May 18 '12 at 15:43
Still no luck whatsoever, the PDF still only displays when the page is refreshed. — Brendan Lesniak, May 18 '12 at 17:54
check out this post http://stackoverflow.com/questions/5267996/how-to-properly-display-an-iframe-in-mobile-safari — Ray, May 20 '12 at 23:28

score 3 · Answer 1 · answered May 21 '12 at 10:17

Since it is a ajax call, iframe has to be coded differently. Check this site, has some solutions... Site

slight modification to the code in the website to open a 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; 
    });

});

Here's the problem...the link that I'm using to link to the page that contains the iFrame is `View User Manual` which has `rel="external"`. That disables AJAX linking. Are you saying that the iFrame itself is being linked with AJAX? — Brendan Lesniak, May 21 '12 at 13:21

score 3 · Accepted Answer · answered May 22 '12 at 06:16

i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else 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>

You didn't really get any feedback on whether or not this worked, so I checked it and it looks like it does, so +1 Good luck! — jamesmortensen, May 26 '12 at 01:23
I attempted this method of linking the iFrame...and yet, the iFrame and page must STILL be reloaded in order for the PDF to show up... — Brendan Lesniak, May 27 '12 at 22:09

iFrame not loading on page load (jQuery Mobile)

2 Answers2