iFrame no se carga en la carga de página (jQuery Mobile)

Tengo problemas para mostrar un iFrame la primera vez que se carga mi página con respaldo de jQuery para dispositivos móviles.iFrame no se carga en la carga de página (jQuery Mobile)

que tienen un iFrame de la siguiente manera:

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

Y por alguna razón, cuando se carga la página, el marco flotante no se puede cargar con ella. Solo puedo ver el archivo PDF si ACTUALIZA la página. ¿Porqué es eso?

¿Por qué el archivo PDF no aparece en el iFrame en primer lugar sin una actualización de página?

Gracias a todos por cualquier idea.

EDIT:

Cuando trato de ope la página con Safari, me sale el siguiente aviso:

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

¿Podría haber algo que ver con la razón por la PDF no se carga correctamente ?

Fuente

2012-05-17 Brendan

Alguien sabe por qué esto sería? – Brendan

¿Alguna suerte con esto? ¿La orientación activa el pdf para mostrar? – JonWells

Aún sin suerte, el PDF aún solo se muestra cuando la página se actualiza. – Brendan

he intentado con el rel = "externo" que funciona sin refrescante .. El primer enlace es una llamada ajax y el segundo enlace no. no fue sencillo, seguro de si estoy perdiendo algo más que tienes ..

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>

Fuente

2012-05-22 06:16:43 srivenky

Realmente no obtuviste ningún comentario sobre si funcionó o no, así que lo revisé y parece que sí, así que +1 ¡Buena suerte! – jmort253

Intenté este método de vincular el iFrame ...y, sin embargo, el iFrame y la página aún DEBEN volver a cargarse para que se muestre el PDF ... – Brendan

Dado que es una llamada ajax, iframe tiene que codificarse de manera diferente. Compruebe este sitio, tiene algunas soluciones ... Site

ligera modificación del código en el sitio web para abrir 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; 
    }); 

});

Fuente

2012-05-21 10:17:46 srivenky

Aquí está el problema ... el enlace que estoy usando para vincular a la página que contiene iFrame es 'View User Manual' que tiene 'rel =" external "'. Eso deshabilita el enlace AJAX. ¿Está diciendo que el iFrame en sí está siendo vinculado con AJAX? – Brendan

¡Parece que me está funcionando a mí también! +1 – jmort253

iFrame no se carga en la carga de página (jQuery Mobile)

Respuesta

Cuestiones relacionadas