iFrame non si carica al caricamento della pagina (jQuery Mobile)

Non riesco a visualizzare un iFrame per la prima volta che viene caricata la mia pagina supportata da jQuery.iFrame non si carica al caricamento della pagina (jQuery Mobile)

Ho un iFrame come segue:

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

E per qualche ragione, quando la pagina viene caricata, l'iFrame non riesce a caricare con esso. Posso vedere il file PDF solo se I REFRESH la pagina. Perché?

Perché il file PDF non viene visualizzato nell'iFrame in primo luogo senza un aggiornamento della pagina?

Grazie a tutti per qualsiasi intuizione.

EDIT:

Quando provo a ope la pagina con safari, ottengo il seguente avvertimento:

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

Potrebbe che hanno qualcosa a che fare con il motivo per cui il PDF non viene caricato correttamente ?

fonte

2012-05-17 Brendan

Chiunque sa perché questo sarebbe? – Brendan

Qualche fortuna con questo? l'orientamento fa scattare il pdf da visualizzare? – JonWells

Ancora senza fortuna, il PDF viene ancora visualizzato solo quando la pagina viene aggiornata. – Brendan

Ho appena provato con il rel = "esterno" funziona senza rinfrescante .. Il primo collegamento è una chiamata ajax e il secondo non lo è. era dritto in avanti, non so se im manca qualcos'altro avete ..

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>

fonte

2012-05-22 06:16:43 srivenky

Non hai avuto alcun riscontro sul fatto che abbia funzionato o meno, quindi l'ho controllato e sembra che lo faccia, quindi +1 Buona fortuna! – jmort253

Ho provato questo metodo per collegare l'iFrame ...e ancora, l'iFrame e la pagina devono essere ancora ricaricati affinché il PDF venga visualizzato ... – Brendan

Poiché è una chiamata Ajax, l'iframe deve essere codificato in modo diverso. Controlla questo sito, ha qualche soluzione ... Site

lieve modifica al codice nel sito Web per aprire un 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; 
    }); 

});

fonte

2012-05-21 10:17:46 srivenky

Ecco il problema ... il link che sto utilizzando per collegare alla pagina che contiene l'iFrame è 'View User Manual' che ha 'rel =" external "'. Ciò disabilita il collegamento AJAX. Stai dicendo che l'iFrame stesso è collegato con AJAX? – Brendan

Sembra che funzioni anche a me! +1 – jmort253

iFrame non si carica al caricamento della pagina (jQuery Mobile)

risposta

Problemi correlati