页面加载时iFrame未加载（jQuery Mobile）

Question

页面加载时iFrame未加载（jQuery Mobile）

7

我在首次加载我的jQuery Mobile页面时，无法让iFrame显示。我的iFrame如下所示： <iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe> 然而，在页面加载时，iFrame未能加载。只有当我刷新页面后才能看到PDF文件。为什么会这样？

为什么PDF文件没有在第一次加载时出现在iFrame中，而需要刷新页面呢？

感谢大家的洞见。

编辑：

当我尝试使用safari打开页面时，会收到以下警告： Resource interpreted as Document but transferred with MIME type application/pdf. 这是否与PDF无法正确加载有关？

- Brendan Lesniak

有人知道这是为什么吗？ - Brendan Lesniak

你有什么进展吗？屏幕方向是否会触发 PDF 显示？ - Jon Wells

仍然没有任何运气，PDF 仅在刷新页面时显示。 - Brendan Lesniak

请查看此帖子：https://dev59.com/i2435IYBdhLWcg3wtCSQ - Ray

2个回答

3

我刚尝试了使用rel="external"，它可以在不刷新页面的情况下运行。第一个链接是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>

- srivenky

你没有真正得到任何关于它是否有效的反馈，所以我检查了一下，看起来是有效的，所以+1，祝好运！ - jamesmortensen

我尝试了将iFrame链接到页面的方法...但是，为了显示PDF文件，仍然必须重新加载iFrame和页面... - Brendan Lesniak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- srivenky · Accepted Answer

由于它是ajax调用，所以iframe必须编写不同的代码。检查这个网站，有一些解决方案... 网站

对网站中的代码进行轻微修改以打开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; 
    });

});