1

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

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

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

问题..

如果我运行 photos.html 页面，它将运行良好并加载相册。我的 javascript 做了两件事。1) 使用 FB API 来获取相册、照片、封面照片等。 2) 动态地创建一个列表视图与这个相册和他们的照片。在这种情况下，两者都很好用！

但是，当我在我的 index.html 中并通过列表视图导航到 photos.html（照片是从持久导航栏中默认选择的按钮）时，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>

照片.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 ，它将正常加载。

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

同样出于某种原因304 Status , Not Modified，我从一页到另一页的过渡。

4

1 回答 1

2

这是因为当您导航到 jQuery Mobile 中的页面时，默认情况下它会尝试通过 ajax 拉取 JQM 页面（data-role="page"（如果没有 data-role='page' 则它将拉取body））并附加它对于当前页面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 -->

请查看官方文档中的以下问答以获取更多详细信息。

于 2013-08-13T14:57:30.800 回答