jquery - "Pages in a navbar initialize repeatedly"或 "Pages reinitialize on every navigation in a TabBar based App in Jquery Mobile"- Chrome

Question

我有以下标记(在第一个选项卡中)-

    <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 native UITabBar)，每当我导航到选项卡时，都会初始化相应的.html文件(我希望页面仅在应用程序生命周期)。

当我删除属性 rel="external"data-ajax="false" 时，问题得到解决，但仅在 Safari 浏览器中，Chrome 停止导航到该页面并给出错误 - “Error加载页面”。 - <----这是 Chrome 浏览器的已知行为吗？

此外，如果我声明一个类似 window.variable=xyz; 的对象，那么一旦我离开页面，存储在 window.variable 中的值就会丢失即每次点击导航栏后应用程序都会重新初始化，并且我无法在整个应用程序中共享 window 对象。

而且，如果我给-

<script>
            $(document).bind("mobileinit", function(){
            alert('Page inited');                     
});
 </script>

在 Tab1.html、Tab2.html、Tab3.html 和 Tab4.html 的 header 中，每当我导航到相应的选项卡页面时，都会调用脚本(即标记中的整个 header )，但我不希望发生这种情况。

这是 Google Chrome 浏览器中的已知问题/功能吗？同样基于 Webkit 构建的 Safari 的行为有所不同。

Answer 1

绝对删除 rel="external" 和 data-ajax="false" 属性，它们会阻止页面兑现。

然后您需要像这样打开兑现:

$(document).one("mobileinit", function () {
    $.mobile.page.prototype.options.domCache = true;
});

如果您希望每个页面都兑现，则仅使用此选项。如果您只想兑现某些页面，请使用以下类比:

<div data-role="page" id="cacheMe" data-dom-cache="true">

您还可以像这样以编程方式缓存页面:

pageContainerElement.page({ domCache: true });

如果您在多个 html-s 中有多个页面，您将需要使用 data-prefetch 属性，如下所示:

<a href="prefetchThisPage.html" data-prefetch> ... </a>

在这里你可以找到我关于这种兑现的另一个答案:https://stackoverflow.com/a/14019929/1848600

现在介绍一下持久对象。如果您遵循了顶级说明，您可以简单地创建一个持久对象，如下所示:

var someObject = { 选项1 : ''， 选项2:0， 选项3:''//等等.. }

rel="external" 和 data-ajax="false" 将阻止 jQM 情况下的对象持久化，这些属性的作用类似于页面刷新。