jQuery Mobile Orientation Change重新呈现而不会丢失页面数据

Question

与此处发布的问题几乎完全相同：jQuery Mobile on landscape portrait change re-render page

每当我旋转手机时，页面上的侧面菜单都会变得棘手，因为大的白色块会被添加到页面的ui-content部分。

如果我添加以下内容：

$( window ).on( "orientationchange", function( event ) {
  $.mobile.changePage(window.location.href, {
    allowSamePageTransition: true,
    transition: 'none',
    reloadPage: true
  });
});

...然后任何静态页面都可以正常工作。

但是，如果我使用其他问题上列出的解决方案，我们的许多页面都会有来自Web服务调用的结果，而那些 poof 。

那么......如何为包含Web服务数据的页面执行此操作？我也试过了page.trigger("create")，但这似乎也没有用。

jQuery Mobile v.1.4.2 PhoneGap Cordova v.3.4

页面布局：

<div data-role="header" id="appheader" data-id="head" data-add-back-btn="false" data-position="fixed">
            <a class="icononly" style="display: none;" data-icon="fi-back" onclick="$.mobile.back();"></a>  
            <h1 style="position: relative; text-align: center; height: 100%;">
                <div class="ui-page-title-current" style="position: absolute; width: 100%;">Welcome</div>
            </h1>
            <a class="icononly" data-icon="fi-menu" id="menuBtn" href="#mainNav"></a>
        </div>  
        <div data-role="page" data-theme="fi" data-ajax="false" id="welcome">
            <div class="ui-page-title">Welcome</div>
            <div class="ui-content" role="main">
                <div id="welcomeLogo">
                    <center><img src="images/welcome-logo.png" style="max-height: 100%; max-width: 100%;" /></center>
                </div>
                <br/>
                <div style="clear:both" class="welcome-links">
                    <table width="100%">
                        <tr>
                            <td width="33%" style="text-align:center"><a class="welcome-btn-myagency" href="#" onclick="phsNavigateTo('Agent');">My Agency</a></td>
                            <th width="33%"><a class="welcome-btn-viewpolicy" href="#" onclick="global.IdCardListManager.ClearList();global.ViewSavedIdCards=false;VerifyLoginAndNavigate('MyPolicy');">View My Policy</a></th>
                            <th width="33%"><a class="welcome-btn-viewidcards" href="#" onclick="global.IdCardListManager.ClearList();global.ViewSavedIdCards=true;phsNavigateTo('IdCards');">View Auto ID Cards</a></th>
                        </tr>
                        <tr>
                            <th width="33%"><a class="welcome-btn-paymybill" href="#" onclick="phsNavigateTo('PayYourBill');">Pay My Bill</a></th>                                
                            <td width="33%" style="text-align:center"><a class="welcome-btn-claimscenter" href="#" onclick="phsNavigateTo('ClaimCenter');">Claim Center</a></td>
                            <td width="33%" style="text-align:center"><a class="welcome-btn-roadside" href="#" onclick="phsNavigateTo('RoadSideAccidentHelp');">Roadside/Accident Assistance</a></td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
        <div id="panel-content" style="display:none">
            <div id="navwrap">
                <div data-role="panel" data-position="right" id="mainNav" data-display="push" class="mainNav">
                    <div data-role="content">
                        <ul data-role="listview" data-inset="false" data-icon="false">
                            <li style="display:inline-block;float:left;width:50%"><a class="ui-icon-fi-home" href="#" onclick="phsNavigateTo('Home', '', 'reverse');">Home</a></li>
                            <li style="display:inline-block"><a id="menuLogin" class="ui-icon-fi-login" href="#" onclick="phsNavigateTo('Login');">Login</a></li>
                        </ul>
                        <ul data-role="listview" data-inset="false" data-icon="false">
                            <li><a class="ui-icon-fi-myagent" href="#" onclick="phsNavigateTo('Agent');">My Agency</a></li>
                            <li><a class="ui-icon-fi-mypolicy" href="#" onclick="global.IdCardListManager.ClearList();global.ViewSavedIdCards=false;VerifyLoginAndNavigate('MyPolicy');">View My Policy</a></li>
                            <li><a class="ui-icon-fi-autoidcards" href="#" onclick="global.IdCardListManager.ClearList();global.ViewSavedIdCards=true;phsNavigateTo('IdCards');">View Auto ID Cards</a></li>
                            <li><a class="ui-icon-fi-paybill" href="#" onclick="phsNavigateTo('PayYourBill');">Pay My Bill</a></li>                    
                            <li><a class="ui-icon-fi-claimscenter" href="#" onclick="phsNavigateTo('ClaimCenter');">Claims Center</a></li>
                            <li><a class="ui-icon-fi-roadside" href="#" onclick="phsNavigateTo('RoadSideAccidentHelp');">Roadside/Accident Assistance</a></li>                    
                        </ul>
                        <ul data-role="listview" data-inset="false" data-icon="false">
                            <li><a class="ui-icon-fi-contact" href="#" onclick="phsNavigateTo('Contact');">Contact Us</a></li>
                            <li><a class="ui-icon-fi-agencylocator" href="#" onclick="phsNavigateTo('AgencyLocator');">Agency Locator</a></li>                  
                            <li><a class="ui-icon-fi-about" href="#" onclick="phsNavigateTo('AboutUs');">About Us</a></li>
                            <li><a class="ui-icon-fi-terms" href="#" onclick="phsNavigateTo('TermsOfUse', '', '' , 'Y');">Terms of Use</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

#navwrap div的内容通过javascript以编程方式添加到每个.ui-page-active中。

以下是之前/之后的图片：

Answer 1

编辑：我认为以下修复了它，但它只对内容不需要滚动的页面产生了影响。一旦你开始滚动内容区域，一个未识别的白色框开始再次从屏幕底部向上滚动，吞下它的路径中的任何东西：（

研究得更远，我在这里找到了答案...... https://forum.jquery.com/topic/jquery-mobile-white-area-when-changing-orientation

...从那个页面......

  

这是一个非常常见的问题。您解决此问题的方法是将所有页面高度设置为100％。   现在请记住，你必须在所有容器上执行此操作。某物   像：

     

body {height：100％;}

     

myPage {身高：100％; }

     

myPage .content {height：100％;}

我所做的是将身高，100％放在身体，.ui-page和.ui-content上，这似乎有效。