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

Javascript only loaded first time or upon refresh

我正在使用 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(因此,每次我们导航到页面时都会执行该脚本,而索引页面上的脚本则不会)。

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

示例:

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

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

里面

干杯

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')。