Javascript 仅在第一次或刷新时加载

Question

我正在使用 Cordova 和 jQuery Mobile 1.4.5 构建一个 cross-platform 应用程序，我有一个简单的 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>

编辑：我 "fixed" 通过将 header 中的主页 link 更改为此 <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，它将打印 On page a.html（因此，每次我们导航到页面时都会执行该脚本，而索引页面上的脚本则不会）。

Answer 1

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

示例：

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

Answer 2

抱歉，我暂时无法发表评论。我尝试建议尝试将您需要的 JS 放在您的 index.html 或 index. blah blah blah 中。或者放在加载的view/page

里面

干杯

Answer 3

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

当用户再次导航到 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" 和唯一 ID 的 DIV。

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

Javascript 仅在第一次或刷新时加载

Javascript only loaded first time or upon refresh

html

javascript

jquery-mobile

cordova