Question

我正在开发一个基于网络的触摸屏应用程序，用于一个名为MisterHouse的流行家庭自动化程序。为了记录，我在华硕便笺簿上的firefox mobile 26.0.1上使用jquery 1.10.2和jquery mobile 1.4.0。该应用程序适用于景观壁挂式平板电脑。

到目前为止，我的代码是：

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1200" http-equiv="content-type">
    <meta name="mobile-web-app-capable" content="yes">
    <title>touchscreen</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.0.js"></script>
    <script type="text/javascript">
      var curr_page = (typeof curr_page == 'undefined') ? "main_menu" : curr_page;

      window.setInterval(ShowTime, 1000);

      $(document).ready(function() {
        LoadPage(curr_page);
      });

      function LoadPage(page_name) {
        $('#content').load('./' + page_name + '.html');
      }

      function ShowTime() {
        $("#dateTime").html(formatAMPM());
      }

      function GoPage(page_name) {
        curr_page = page_name;
        LoadPage(page_name);
      }

      function GetMhMode() {
        var url = './sub?json(objects=mode_occupied)';

        //Get the current MH mode using a JSON call
        $.getJSON(url, function (data) {
          var m, modestable;

          var mode = data.objects.mode_occupied.state;
          var modes = data.objects.mode_occupied.states;
          var count = Object.keys(modes).length;

          modestable = '<table id="modesTable" style="width: 100%" data-transition="fade"><tbody>';
          modestable += '<tr><td colspan="' + (count - 1) + '" rowspan="1" align="center">';
          modestable += '<img src="images/icons/' + mode + '_mode.png" alt="Current mode"  width="230" height="230" />';
          modestable += '</td></tr>';

          modestable += '<tr>';

          for (var i = 0;i < count; i++) {
            if (modes[i] != mode) {
              modestable += '<td align="center">';
              modestable += '<img src="images/icons/' + modes[i] + '_mode.png" alt="' +     modes[i] + ' mode" width="170" height="170">';
              modestable += '</td>';
            }
          }
          modestable += '</tr>';
          modestable += '</tbody></table>';

          $('#modesList').html(modestable);
        });
      }

      function formatAMPM() {
        var d = new Date(),
        minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() :     d.getMinutes(),
        hours = d.getHours() > 12 ? d.getHours() - 12 : d.getHours(),
        ampm = d.getHours() >= 12 ? 'pm' : 'am',
            months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

        return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+'     '+d.getFullYear()+' '+hours+':'+minutes+ampm;
      }
    </script>

    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div data-role="page" class="page" data-theme="c">
      <div data-role="header" class="header"><span class="helper"></span>
        <div id="header_right"><img alt="button left cap" src="images/black_button_left.png"><span
            id="dateTime">&nbsp;</span><img alt="button left cap"     src="images/black_button_right.png">
        </div>
      </div>
      <!-- /header -->
      <div data-role="main" class="main" id="content" data-theme="c">
        &nbsp;
      </div>
      <!-- /content -->
      <div data-role="footer" class="footer" data-theme="c">
    <span class="helper"></span><a href="javascript:GoPage('main_menu');"     id="home_btn">&nbsp;</a>
      </div>
      <!-- /footer --> </div>
    <!-- /page -->

  </body>
</html>

页面加载并显示我的主屏幕，即2行中的8个图标。第一个图标调用load_page函数，该函数将其加载到页面的$（'＃content'）部分：

<!DOCTYPE html>
<html>
 <head>
  </head>
  <body>
    <div id="modesList"><script type="text/javascript">GetMhMode();</script></div>
  </body>
</html>

然后调用GetMhMode（）执行ajax getJSON调用以从服务器获取数据。从那时起，它构建了一个表格，用于显示系统当前模式的图标，以及其他可用系统模式的图标，最终将链接转换为不同的模式。问题是，当我点击“系统模式”图标时，它加载的页面在平板电脑上是空白的。当我从桌面浏览器加载同一页面时做同样的事情时，一切正常。

我在我的手机版Chrome上测试过这个版本（在平板电脑上找不到什么版本），看起来效果还不错。我想在FireFox中使用它的主要原因是FF有一个附加组件，它在成功加载页面后将其置于全屏模式，这使得它看起来和行为更像是常规应用而不是网页。

在过去的几天里，我一直在进行广泛的论坛搜索和一堆不同的代码测试来尝试解决这个问题，但无济于事。我的想法是它几乎必须与FireFox以及它与移动jquery一起工作的方式。我在谷歌搜索中发现了一些其他论坛帖子，讨论了FF和jquery mobile的类似问题，但我尝试了大多数其他论坛帖子说“修复”他们的问题，但都没有奏效。< / p>

如果您需要我提供更多信息，请告诉我，但我正在拉出我想要弄清楚的头发。任何帮助表示赞赏。

Dan Bemowski

jquery mobile .html（）无法在firefox中呈现

0 个答案: