iFrame无法加载页面加载（jQuery Mobile）

我无法让iFrame显示第一次加载jQuery移动支持页面。iFrame无法加载页面加载（jQuery Mobile）

我有一个iFrame如下：

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

，由于某种原因，当页面加载时，iframe失败，它加载。我只能看到PDF文件，如果我REFRESH页面。这是为什么？

为什么没有页面刷新，PDF文件没有在iFrame中显示？

谢谢大家的任何见解。

编辑：

当我尝试OPE与Safari浏览器的页面，我得到以下警告：

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

莫非是有事做，为什么PDF无法正确加载？

来源

2012-05-17 Brendan

有人知道为什么这会是什么？ – Brendan

这个好运气吗？方向是否触发PDF显示？ – JonWells

仍然没有运气，PDF仍然只在页面刷新时显示。 – Brendan

我只是想用相对= “外部” 它的工作原理无需刷新..第一个链接是ajax调用，第二个链接不是。这是简单的，不知道我在想念着别的东西，你有..

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>

来源

2012-05-22 06:16:43 srivenky

你真的没有得到任何关于这是否工作的任何反馈，所以我检查了它，它看起来像它，所以+1祝你好运！ – jmort253

我尝试了这种连接iFrame的方法...然而，iFrame和页面仍然需要重新加载才能显示PDF ... – Brendan

由于它是ajax调用，所以iframe必须以不同的方式进行编码。查看本网站，有一些解决方案... Site

对网站中的代码稍作修改以打开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; 
    }); 

});

来源

2012-05-21 10:17:46 srivenky

这里是问题...我用来链接的链接到包含iFrame的页面是'View User Manual'''rel =“external”'。这将禁用AJAX链接。你是说iFrame本身与AJAX链接？ – Brendan

看起来它也适用于我！ +1 – jmort253

iFrame无法加载页面加载（jQuery Mobile）

回答

相关问题