Phonegap 在重新加载时会破坏 jQuery Mobile 页面 - 再次访问同一页面答案

【问题标题】：Phonegap breaks jQuery Mobile pages when reloaded - visiting the same page againPhonegap 在重新加载时会破坏 jQuery Mobile 页面 - 再次访问同一页面
【发布时间】：2013-05-10 07:22:41
【问题描述】：

我一直在使用PhoneGap 和jQuery Mobile 开展一个项目。我的设置在一个 html 文件中使用多个页面。

我遇到了一个问题，但我在任何地方都没有找到类似的东西：

当我重新访问一个页面时，这意味着我访问过它，然后导航到另一个页面，现在返回到第一页，页眉和内容之间以及页脚和内容之间有一些填充页面。

如下截图所示：

http://i.imgur.com/neBwZYx.png

您可以在下面看到添加的填充，红色背景，之后返回到上面的页面（每个页面都会发生这种情况）

http://i.imgur.com/u1whW9b.png

这里的代码非常大，所以如果有人有任何建议，请告诉我如何解决这个问题或在哪里寻找问题。

需要注意的是，该问题仅在应用程序在 Android 平板电脑上运行时存在，而不是在通过笔记本电脑上的浏览器查看时存在。

谢谢

【问题讨论】：

标签： android jquery cordova jquery-mobile jquery-mobile-pageshow

【解决方案1】：

您可以使用此功能强制正确的内容高度：

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

它必须在 pageshow 事件期间被激活，因为只有在那个时候页面高度是正确的：

$(document).on('pageshow', '#index', function(){       
    $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
});

工作示例：http://jsfiddle.net/Gajotres/nVs9J/

如果您想了解有关此功能的更多信息，请阅读我的另一篇文章：https://stackoverflow.com/a/14550417/1848600

【讨论】：

我在做同样的事情，这就是为什么我首先要全屏。当我第二次访问该页面时会出现问题。如您所见，页眉移动到屏幕的可见空间上方，并且在页眉和页脚之间添加了空间。您看到的红色是包含整个页面的 div 的背景色，浅灰色是 div #content 的背景色。