2

次のマークアップがあります(最初のタブに)-

    <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 は、動作が異なります。

4

1 に答える 1