我正在使用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文件，可以在此处找到。浏览到index.html它的打印品时On index.html，我们可以使用导航栏转到要a.html打印的内容On page a.html。如果然后通过单击“主页”按钮再次转到索引，它将不再打印On index.html（因此脚本不会执行），而如果a.html再次导航到该索引，它将进行打印On page a.html（因此，每次导航到该脚本时都会执行该脚本）该页面，而索引页上的脚本则没有）。
使用jQuery Mobile时，它index.html成为应用程序中所有页面的容器。因此，当用户导航到时a.html，其内容将注入到已为创建的DOM中index.html。脚本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显示“页面”时都会触发该事件。（index.htmlwith中可以包含多个元素data-role="page"，它们都被视为“页面”）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句