私はCordovaとjQuery Mobile 1.4.5でクロスプラットフォームアプリケーションを構築していますが、ページにはファイルをロードする必要があります。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
ファイルは単に私が後で手動でナビゲーションバーを通じて、そのページに移動したときにコルドバがindex.html
ファイルをロードするときに印刷されないが、console.log("executed");
が含まれています。
EDIT:この動作は他のページには表示されないことに注意してください。 たとえば、以下のページは常に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>
EDIT:
$("#homeButton").on("click", function() {
window.location.replace("index.html");
});
:私はこの<a href="#" id="homeButton" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
にヘッダにホームページへのリンクを変更し、このようなホームボタンのクリックハンドラに置くことによって、問題を「固定」これは、実際にページを参照するのと同じです。しかし、私はこれが適切な解決策ではないと考えています。誰かが私のホームページにこのような現象が現れる理由を指摘できればいいです。
index.html
にリダイレクトするとき、私はlocalStorage
に入れたアイテムが失われているようですので、これは実際にEDIT
...全く
ソリューションではありません。私は、できるだけ簡単に問題を再現。 再生には、 hereという2つのhtmlファイルが含まれています。index.html
にブラウズすると、
On index.html
が表示され、
a.html
に移動すると、
On page a.html
と表示されます。
a.html
に再度移動すると、
On page a.html
が表示されます(したがって、そのスクリプトは毎回実行されます)。ホームボタンをクリックして再びインデックスに移動すると、
On index.html
はもう印刷されません(したがって、スクリプトは実行されません)。インデックスページのスクリプトは表示されませんが、ページに移動します)。
'b.html'には同じHTMLが含まれていますか? – fzzle
@fzzle 'b.html'には同じヘッダーが含まれていますが、もちろん別の本体があり、別のjavascriptファイルが含まれています。 – HyperZ
ダウン有権者は、少なくとも建設的なことはできますか?これの理由は何ですか? – HyperZ