iFrame không tải khi tải trang (jQuery Mobile)

Tôi gặp sự cố khi tải iFrame để hiển thị lần đầu tiên trang tải xuống được hỗ trợ trên điện thoại di động jQuery của tôi.iFrame không tải khi tải trang (jQuery Mobile)

Tôi có một iFrame như sau:

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

Và đối với một số lý do, khi tải trang, iFrame không tải với nó. Tôi chỉ có thể xem tệp PDF nếu tôi REFRESH trang. Tại sao vậy?

Tại sao tệp PDF không hiển thị trong iFrame ở nơi đầu tiên mà không cần làm mới trang?

Cảm ơn mọi người vì bất kỳ thông tin chi tiết nào.

EDIT:

Khi tôi cố gắng để ope trang với safari, tôi nhận được cảnh báo sau đây:

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

Có thể có một cái gì đó để làm với lý do tại sao PDF không tải một cách chính xác ?

Nguồn

2012-05-17 Brendan

Bất kỳ ai biết tại sao điều này sẽ là gì? – Brendan

Bất kỳ may mắn nào với điều này? định hướng kích hoạt pdf để hiển thị? – JonWells

Vẫn không có may mắn, PDF vẫn chỉ hiển thị khi trang được làm mới. – Brendan

tôi chỉ thử với rel = "bên ngoài" nó hoạt động mà không làm mới .. Liên kết đầu tiên là cuộc gọi ajax và liên kết thứ hai thì không. đó là thẳng về phía trước, không chắc chắn nếu im thiếu một cái gì đó khác mà bạn có ..

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>

Nguồn

2012-05-22 06:16:43 srivenky

Bạn thực sự không nhận được bất kỳ phản hồi nào về việc việc này có hiệu quả hay không, vì vậy tôi đã kiểm tra và có vẻ như vậy, vì vậy +1 Chúc bạn may mắn! – jmort253

Tôi đã thử phương pháp liên kết iFrame này ...tuy nhiên, iFrame và trang phải STILL được tải lại để PDF hiển thị ... – Brendan

Vì đây là cuộc gọi ajax, khung nội tuyến phải được mã hóa khác nhau. Kiểm tra trang web này, có một số giải pháp ... Site

sửa đổi nhỏ mã trên trang web để mở 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; 
    }); 

});

Nguồn

2012-05-21 10:17:46 srivenky

Đây là vấn đề ... liên kết mà tôi đang sử dụng để liên kết vào trang chứa iFrame là 'View User Manual' có 'rel =" external "'. Điều đó vô hiệu hóa liên kết AJAX. Bạn có nói rằng bản thân iFrame đang được liên kết với AJAX không? – Brendan

Có vẻ như nó cũng làm việc với tôi! +1 – jmort253

iFrame không tải khi tải trang (jQuery Mobile)

Trả lời

Các vấn đề liên quan