jquery mobile .html（）不在Firefox中渲染
我正在为一个名为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"> </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">
</div>
<!-- /content -->
<div data-role="footer" class="footer" data-theme="c">
<span class="helper"></span><a href="javascript:GoPage('main_menu');" id="home_btn"> </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的类似问题，但是我尝试了很多其他论坛帖子中说的“固定”问题的大部分内容，但都没有成功。
如果你需要更多的信息，请告诉我，但我正在拔出我已经试图弄清楚的头发。 任何帮助表示赞赏。
Dan Bemowski
链接地址: http://www.djcxy.com/p/79749.html