带有Phonegap的TabBar不适用于每个页面答案

【问题标题】：TabBar with Phonegap not working on every page带有Phonegap的TabBar不适用于每个页面
【发布时间】：2013-12-02 10:23:20
【问题描述】：

我正在使用带有 NativeControls/TabBar 插件的 PhoneGap，它适用于第一页。但是，当我按下导航到不同的页面时，插件停止生效。

在index.html 页面上：

    <script>
        document.addEventListener("deviceready", function() {
            nativeControls = window.plugins.nativeControls;
            nativeControls.createTabBar();              
            console.log("TabBar initiated");
            nativeControls.createTabBarItem(
              "about",
              "About",
              "/www/img/20-gear2.png",
              {"onSelect": function() {
                window.location.href="about.html";
              }}
            );
            nativeControls.createTabBarItem(
              "guide",
              "Guide",
              "/www/img/76-baby.png",
              {"onSelect": function() {
                window.location.href="grid.html";
              }}
            );
            nativeControls.createTabBarItem(
              "ideas",
              "Ideas",
              "/www/img/27-planet.png",
              {"onSelect": function() {
                window.location.href="ideas.html";
              }}
            );
            nativeControls.showTabBar();
            nativeControls.showTabBarItems("about", "guide", "ideas");
        }, false)
    </script>

按下任何按钮会将其带到相应的 HTML 页面并选择正确的选项卡。但是，在此页面上，所有选项卡都不会继续工作 - 按下选项卡按钮只会突出显示它，但不会将视图重新定位到页面。

我已经尝试将相同的脚本粘贴到其他页面的标题上，但那里也没有结果。

【问题讨论】：

我很想知道这个问题的答案！

标签： javascript ios cordova

【解决方案1】：

我之前使用的一个解决方案是通过 AJAX 加载所有内容，而不是加载额外的 .html 页面。我在下面包含了一些 sn-ps：

在 index.html 中，我指定了一个 DIV 来接收每个页面的 HTML

<div id="ajaxCont"> </div>

同样在 index.html 中，我声明了以下函数：

function loadPage(url, onleave, onenter, title) {                               

   // If onleave function specified
   if (onleave) {
      onleave();
   }

   var xmlhttp = new XMLHttpRequest();

   // Callback function when XMLHttpRequest is ready
   xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState == 4){
         if (xmlhttp.status == 200 || xmlhttp.status == 0) {
            document.getElementById('ajaxCont').innerHTML = xmlhttp.responseText;

            // If onenter function specified
            if (onenter) {
                onenter();
            }
         }else {
            document.getElementById('ajaxCont').innerHTML = "Error loading page " + url;
         }
      }
   };

   xmlhttp.open("GET", url , true);
   xmlhttp.send();
}

然后，可以像这样创建每个标签栏项：

tabBar.createItem("contact", "Contact", "/www/img/734-chat.png", {
    onSelect: function() {
       loadPage("contact.html", null, null, "Contact");
    }
});

【讨论】：