"Pages in a navbar initialize repeatedly"或"Pages reinitialize on every navigation in a TabBar based

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原生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的头脚本，即在标记的整个头被调用，每当我导航到相应的标签页，我不想发生。

这是一个已知的问题/功能在谷歌Chrome浏览器? Safari——也是基于Webkit构建的。

Answer 1

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

那么你需要像这样打开现金:

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

如果您希望对每个页面进行兑现，请使用ONLY选项。如果您只想兑现某些页面，可以使用以下类比:

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

你也可以像这样以编程方式缓存一个页面:

pageContainerElement.page({ domCache: true });

如果你在多个html-s中有多个页面，你需要使用这样的数据预取属性:

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

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

现在谈谈持久性对象。如果您遵循了上面的说明，您可以简单地创建一个持久对象，如下所示:

var someObject = {选项1:"，选项2:0;选项3:"//等等。}

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