次のマークアップがあります(最初のタブに)-
<div data-role="navbar" class="myClass">
<ul>
<li><a rel="external" data-ajax="false" href="Tab1.html" data-transition="slidefade" class="ui-btn-active ui-state-persist" id="favorite" data-icon="custom">Tab1</a></li>
<li><a rel="external" data-ajax="false" href="Tab2.html" data-transition="slidefade" id="recent" data-icon="custom">Tab2</a></li>
<li><a rel="external" data-ajax="false" href="Tab3.html" data-transition="slidefade" id="contacts" data-icon="custom">Tab3</a></li>
<li><a rel="external" data-ajax="false" href="Tab4.html" data-transition="slidefade" id="keypad" data-icon="custom">Tab4</a></li>
</ul>
</div>
ナビゲーションバーをテーピングしてページを切り替えると (CSS を介して iOS ネイティブの UITabBar のように見えるようにしました)、対応する .html ファイルは、タブに移動するたびに初期化されます (ページをアプリライフで一度だけ初期化する必要がありますサイクル)。
属性を削除するrel="external" data-ajax="false"
と問題は解決しますが、Safari ブラウザーでのみ、Chrome がページへの移動を停止し、「ページの読み込みエラー」というエラーが表示されます。-
<----これは Chrome ブラウザの既知の動作ですか?
また、次のようなオブジェクトを宣言すると、ページから移動するとすぐにwindow.variable=xyz;
保存されている値window.variable
が失われます。つまり、ナビゲーションバーをタップするたびにアプリケーションが再初期化され、アプリケーションwindow
全体でオブジェクトを共有できなくなります。
そして、私が与えるなら-
<script>
$(document).bind("mobileinit", function(){
alert('Page inited');
});
</script>
Tab1.html、Tab2.html、Tab3.html、および Tab4.html のヘッダーでは、スクリプト、つまり、マークアップのヘッダー全体が、対応するタブ ページに移動するたびに呼び出されますが、これは望ましくありません。
これは Google Chrome ブラウザの既知の問題/機能ですか? 同じく Webkit 上に構築されている Safari は、動作が異なります。