Question

我正在使用Cordova和jQuery Mobile 1.4.5构建一个跨平台的应用程序，我有一个简单的html页面，它应该加载javascript文件。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">

        <!-- Include jQUERY --->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.css">
        <link rel="stylesheet" href="css/custom-icons.css">
        <script src="jquery/jquery.js"></script>
        <script src="jquery/jquery.mobile-1.4.5.js"></script>

        <title>myPage</title>
    </head>
    <body>
        <!-- jQUERY HEADER is a navigation bar with multiple options -->
        <div data-role="header">
            <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
            <h1>my app</h1>
            <div data-role="navbar">
                <ul id="nav-bar">
                    <li><a href="a.html" data-page="a">a</a></li>
                    <li><a href="b.html" data-page="b">b</a></li>
                    <li><a href="c.html" data-page="c">c</a></li>
                </ul>
            </div>
        </div>

       <div role="main" class="ui-content">
           <center><h3><i>A title</i></h3>

           <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                <legend>my legend</legend>
                <input type="checkbox" data-role="flipswitch" name="flip1" id="flip1">
                <input type="checkbox" data-role="flipswitch" name="flip2" id="flip2">
                <input type="checkbox" data-role="flipswitch" name="flip3" id="flip3">
                <input type="checkbox" data-role="flipswitch" name="flip4" id="flip4">
           </fieldset>
           </center>
       </div>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/home.js"></script>
    </body>
</html>

但是，home.js文件仅在第一次（或刷新时）加载，但如果我在例如b.html上并且我导航到上一页（index.html）然后home.js没有被执行。

主home.js文件只包含console.log("executed");，当cordova加载index.html文件时会打印，但之后我会通过导航栏手动导航到该页面。

编辑：请注意，其他页面不显示此行为。例如，下面的页面总是加载javascript文件。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css"> -->

        <!-- Include jQUERY --->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.css">
        <link rel="stylesheet" href="css/custom-icons.css">
        <script src="jquery/jquery.js"></script>
        <script src="jquery/jquery.mobile-1.4.5.js"></script>

        <title>bla bla</title>
    </head>
    <body>
        <!-- jQUERY HEADER is a navigation bar with multiple options -->
        <div data-role="header">
            <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
            <h1>smartHub</h1>
            <div data-role="navbar">
                <ul id="nav-bar">
                    <li><a href="a.html" data-page="a">a</a></li>
                    <li><a href="b.html" data-page="b">b</a></li>
                    <li><a href="c.html" data-page="c">c</a></li>
                </ul>
            </div>
        </div>

        <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
          <h1>...</h1>
            <ul data-role="listview" data-inset="false">
                ...
            </ul>
        </div>

        <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
          <h1>...</h1>
            <ul data-role="listview" data-inset="false">
                ...
            </ul>
        </div>

        <script type="text/javascript" src="js/someOtherFile.js"></script>
    </body>
</html>

编辑：我通过将标题中的主页链接更改为此<a href="#" id="homeButton" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>来解决问题，然后为主页按钮添加点击处理程序，如下所示：

$("#homeButton").on("click", function() {
    window.location.replace("index.html"); 
});

这样做相当于真正浏览页面。但是，我不认为这是一个适当的解决方案。如果有人可以指出为什么我的主页会表现出这种行为，那就太好了。

此外，这实际上根本不是一个解决方案，因为当重定向到localStorage时，我放入index.html的项目似乎丢失了......

编辑：我尽可能简单地重现了这个问题。 复制包含两个html文件，可以找到here。当浏览到index.html时，它会打印On index.html，然后我们可以使用导航栏转到a.html，这将打印On page a.html。如果我们再单击主页按钮再次转到索引，它将不再打印On index.html（因此脚本不会执行），而如果我们再次导航到a.html，它将打印{{ 1}}（因此，每次我们导航到页面时都会执行该脚本，而索引页面上的脚本则没有）。

Answer 1

使用jQuery Mobile index.html成为应用中所有网页的容器。因此，当用户导航到a.html时，其内容将注入已为index.html创建的DOM中。 index.html中的脚本仍然有效。 index.html内容仍保留在DOM中，但却被隐藏。当用户导航回index.html时，index.html的内容再次变为可见。从DOM中删除a.html的内容。

当用户再次导航到a.html时，其内容将再次注入DOM，再次执行其中的任何脚本。

拍摄这些页面并观看控制台。

的index.html：

<!DOCTYPE html>
<html>
    <head>  
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Include jQUERY -->
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <title>Index page</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
                <h1>My app title</h1>
                <div data-role="navbar">
                    <ul id="nav-bar">
                        <li><a href="a.html" data-page="a">a</a></li>
                        <li><a href="#" data-page="b">b</a></li>
                        <li><a href="#" data-page="c">c</a></li>
                    </ul>
                </div>
            </div>

           <div role="main" class="ui-content">
               <h3><i>Some title</i></h3>
           </div>

            <script>
                console.log("On index.html");
            </script>
        </div>
        <script>
            $(document).on('pageshow', function() {
                // catch the ID of the active page
                var curID = $('.ui-page-active').attr('id');
                console.log("curID: " + curID);
                switch (curID) {
                    // code here
                    default: break;
                }
            });
        </script>
    </body>
</html>

a.html：

<html>
    <head>  
        <!-- Note: no need to re-include the jQM-files. They're already around. -->
        <title>Other page page</title>
    </head>
    <body>
        <div data-role="page" id="pageA">
            <div data-role="header">
                <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
                <h1>My app title</h1>
                <div data-role="navbar">
                    <ul id="nav-bar">
                        <li><a href="a.html" data-page="a">a</a></li>
                        <li><a href="#" data-page="b">b</a></li>
                        <li><a href="#" data-page="c">c</a></li>
                    </ul>
                </div>
            </div>

           <div role="main" class="ui-content">
               <p>Page a</p>
           </div>
            <script>
                console.log("On page a.html");
            </script>
        </div>
    </body>
</html>

请注意，我添加了data-role="page"的DIV以及两个文件中的唯一ID。

pageshow事件处理程序是关键。每次jQM显示“页面”时都会触发它。（index.html data-role="page"中可能有多个元素，它们都被视为“页面”。

Answer 2

这是一个缓存问题，您可以对JS文件使用版本控制：

示例：

<script type="text/javascript" src="js/home.js?version=1.0.0.5"></script>

Answer 3

对不起，我现在不能发表评论。我尝试建议您尝试将所需的JS放入index.html或index. blah blah blah。或者将其放在加载的view/page

中

干杯

Javascript仅首次加载或刷新

3 个答案: