Question

我正在开发一个jquery移动网站，我在运行javascript代码时遇到了一些问题。

我有一个主页index.html，它基本上是一个导航到各种html页面的列表视图。我对我的页面使用单页结构，这意味着每1个html文件包含1个页面。现在，从主页，我导航到另一个页面，我在其中使用persistent NavBar带有2个选项的水平按钮。一个是照片，另一个是多媒体。

对于我使用Javascript FB API的照片，从FB页面下载照片，然后使用PhotoSwipe插件，我将它们呈现给用户。

问题..

如果我运行photos.html页面，它将运行良好并加载相册。我的javascript有两件事。 1）使用FB API获取相册，照片，封面照片等.2）动态创建包含此相册及其照片的列表视图。在这种情况下，两者都很棒！

然而，当我在我的index.html中并且我浏览listview到photos.html（照片是来自persisent NavBar的默认选择按钮）时，Javascript代码不起作用。就像没有被召唤一样..

index.html 如下所示：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="themes/EspacioJoven.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="themes/custom.css" />
</head> 
<body> 

<div data-role="page" id="home" data-theme="a">
    <!--
    <div data-role="header">
        <h1>Application Title</h1>
    </div>
    -->

    <div data-role="content">   

        <h2 id="banner">Joven Mobile</h2>
        <div class="main_menu">
            <ul data-inset="true" data-role="listview">
                <li><a href="EcioJven.html"><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</a></li>
                <li><a href="NeJoven.html"><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</a></li>
                <li><a href="photos.html"><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</a></li>
                <li><a href="SajhrJoven.html"><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</a></li>
            </ul>   
         </div> 
    </div>

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

</div>
</body>
</html>

photos.html 如下所示：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="themes/EspacioJoven.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="themes/custom.css" />

    <!-- Needed from PhotoSwipe Plugin -->
    <link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
    <link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="photoSwipe/klass.min.js"></script>
    <script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
    <script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script> 
    <!-- Needed from PhotoSwipe Plugin --> 

</head>
<body> 

    <div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">

        <div data-role="header" data-id="fixedNav" data-position="fixed">
            <h1>Application Title</h1>
            <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="photos.html" class="ui-btn-active ui-state-persist">Photos</a></li>
                    <li><a href="videos.html">Videos</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /header -->

        <div data-role="content">
            <ul data-role="listview" data-inset="true" class="albums">  
                <!-- Here the albums are created through javascript (createAlbums.js) -->
            </ul>       
            <button type="button" id="loadMoreAlbums">More Albums...</button> 
        </div><!-- /content -->
    </div><!-- /page -->

    <div id="fb-root"></div>

    <script type='text/javascript' src='javascript/createAlbums3.js'></script>

</body>
</html>

如你所见，我最后调用了我的javascript。任何想法为什么从未打电话？如果我刷新页面，这意味着运行photos.html，它将正常加载。

其实我也看看＆＃34;元素＆＃34;来自调试器的表。当我在index.html页面中时，html元素似乎都是正确的。当我转换到photos.html页面时，通过查看元素表，我发现它们没有改变！标题确实改变但其余的保持不变是不可思议的？！这怎么可能发生？它看起来像是同一页面，具有相同的CSS和JavaScript源，但应该是不同的！如你所见，我使用photoSwipe javascript，css等！只有当我重新加载页面元素是正确的。请问有什么想法？我不知道这里发生了什么。

出于某些原因，我通过转换获得304 Status , Not Modified，从一个页面到另一个页面。

Answer 1

这是因为当您导航到jQuery Mobile中的页面时，默认情况下会尝试拉出JQM页面（data-role="page"（如果没有data-role ='page'那么它会拉body））通过ajax并将其附加到当前页面的DOM，问题是它只会拉动JQM页面（如果没有，则为body）并忽略所有内容（除了标题之外）它意味着你的JavaScript不会被调用。

刷新页面时，会进行正常的HTTP调用，并加载整个页面，以便执行代码。

为了让你的JavaScript被调用，你需要在你的第一页上有相关的脚本，或者你可以使用你的JQM页面包装器，然后它将随之拉动。

 <div data-role="page" id="photos" data-theme="a"
      data-add-back-btn="true" data-back-btn-text="Back">
  ....
 <script type='text/javascript' src='javascript/createAlbums3.js'></script>
 </div><!-- /page -->

有关详细信息，请查看官方文档中的following Q&A。

在浏览listview，jquery mobile时，Javascript不会运行

1 个答案: