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

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

javascript html cordova jquery-mobile

Javascript仅在第一次或刷新时加载,javascript,html,cordova,jquery-mobile,Javascript,Html,Cordova,Jquery Mobile,我正在用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 'uns

我正在用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>

编辑：我“修复”了这个问题，将标题中指向主页的链接更改为

，然后为主页按钮添加一个点击处理程序，如下所示：

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

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

此外，这实际上根本不是一个解决方案，因为在重定向到

index.html

时，我放在

localStorage

中的项目似乎丢失了

编辑：我尽可能简单地重现了问题。 复制包含两个可以找到的html文件。

当浏览到

index.html

时，它在index.html上打印

，然后我们可以使用导航栏转到a.html
，它将在a.html

页上打印

。如果我们再次单击主页按钮进入索引，它将不再在index.html

上打印

（因此脚本不会执行），而如果我们再次导航到a.html
，它将在a.html

页面上打印

（因此，每次我们导航到页面时都会执行该脚本，而索引页面上的脚本不会执行该脚本）。
这是一个缓存问题，您可以对JS文件使用版本控制：
例如：
<script type="text/javascript" src="js/home.js?version=1.0.0.5"></script>

很抱歉，我现在无法发表评论。我试图建议您尝试将所需的JS
放入index.html
或index.blah blah
。或者将其放入加载的视图/页面中

使用jQuery Mobile的Cheers
index.html
将成为应用程序中所有页面的容器。因此，当用户导航到a.html
时，其内容将被注入已为index.html
创建的DOM中。index.html
中的脚本将保持活动状态。index.html
内容将保留在DOM中，但处于hi状态dden.当用户导航回index.html
时，index.html
的内容将再次可见。a.html
的内容将从DOM中删除
当用户再次导航到a.html
时，其内容将再次注入DOM，再次执行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>


索引页
我的应用程序标题





一些头衔
log（“On index.html”）；
$（文档）.on（'pageshow'，function（）{
//捕获活动页的ID
var curID=$（'.ui页面活动'）.attr（'id'）；
console.log（“curID:+curID”）；
开关（curID）{
//代码在这里
默认：中断；
}
});

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>


其他网页
我的应用程序标题





a页
console.log（“在a.html页面上”）；

请注意，我在这两个文件中都添加了具有唯一ID的div
pageshow
事件处理程序是关键。每次jQM显示“页面”时都会触发它。（使用data role=“page”
的index.html
中可以有多个元素，它们都被视为“页面”）.
b.html

是否包含相同的html？@fzzle

b.html

包含相同的标题，但当然有不同的正文，并包含不同的javascript文件。投票人是否至少具有建设性？原因是什么？当我认为你的应用程序不是一个单页应用程序时，我是对的吗？如果是，为什么你不包含其他页面中的ng cordova.js？（询问，因为这似乎是文件之间的差异）@RonaldPK确实，我的应用程序不是一个单页应用程序。我不确定，但我认为

cordova.js

只需要加载一次，否则会导致错误

error:cordova已经定义了

。你能说得更清楚一点吗？我不太喜欢web开发。这到底能做什么？我总是需要发送一个新的随机v吗如果我不想缓存文件，版本号？如果您正在开发并积极编辑文件，您可以设置版本控制（如果启用缓存）或者您可以通过.htaccess禁用缓存。我希望我正确回答了您的问题。如果没有，请更正。因为这些页面仍然非常基本，我可以在浏览器中进行测试。我正在使用safari和停用缓存来测试是否存在缓存问题。但是，问题仍然存在，我真的不明白为什么。其他页面s没有这个问题，我很困惑为什么..我尝试了你的.htaccess解决方案，但是，请注意，我使用的是Cordova，所以我不确定将文件放在哪里？我将其放在

www

文件夹中，我的

html

文件所在的位置，但是，这并没有解决问题（在浏览器和手机上也尝试过）我的坏，忘记HTTAccess解决方案。实际上，版本控制应该能够获得新的内容。我考虑内联脚本。

<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>