Question

我遇到了JQM的问题，其中内部页面内的外部页面的工作代码无法加载。

以下是外部页面的代码（单独工作正常）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

<title>zRSSFeed - Basic RSS Feed Example</title>
</head>

<body>

<h1>zRSSFeed - Basic RSS Feed Example</h1>
<p>Simple as it gets, this example uses the same code as in the documentation.</p>

<script type="text/javascript">
$(document).ready(function () {
    $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
        limit: 5
    });
});
</script>

<div id="test"></div>

</body>
</html>

现在......问题在于我将该代码放入内部页面：

....<script src="jquery.zrssfeed.min.js" type="text/javascript"></script> //include in head...


<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   


    <p>Page content goes here.</p>



             <script type="text/javascript">
        $(document).ready(function () {
            $('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
                limit: 5
            });
        });
        </script>

<div id="test"></div>           

    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

是否有任何额外的要求让这个工作？

由于某种原因，内部页面中根本没有显示Feed。

Answer 1

解决方案

当您使用AJAX加载页面时，似乎只加载了页面（<div data-role="page"> ... </div>），而不是完整的网站，这样脚本无法获取excuted。

您需要将脚本包含在 page-div 中，而不是在头部加载，以便在页面加载时获取conde。

您的开始/登陆页面

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.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.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head> 

<body> 
    <!-- Loaded via AJAX because data-ajax="false" or rel="external" is not set -->
    <a href="page2.htm" data-role="button">To page 2</a>
</body>
</html>

要加载的页面

<html>
    <!-- ... more html -->
    <script src="jquery.zrssfeed.min.js" type="text/javascript"></script>
    <!-- ... more html -->

    <div data-role="page" id="rss_page">
        <!-- your stuff -->
    </div>
</html>

加载什么（通过AJAX）

    <div data-role="page" id="rss_page">
        <!-- your stuff -->
    </div>

Answer 2

请尝试使用Firebug进行调试。它是Firefox扩展。

从http://getfirebug.com/
打开内部网页，然后点击浏览工具栏中的 FireBug 图标。您将在底部看到面板。
点击网络标签，然后刷新页面以检查所有必需的文件是否已加载。您将看到红色的丢失文件。修复它们。
控制台标签，可查看Javascript错误。

希望你能找到解决方案。

JQuery Mobile内部和外部页面

2 个答案:

解决方案

您的开始/登陆页面

要加载的页面

加载什么（通过AJAX）