0

当我使用手机测试应用程序时，我使用后退设备按钮显示上一页这适用于所有页面，除了一个页面在尝试访问上一页时显示未设置样式的页面，所以有些东西奇怪的。
这里做一个简单的解释。有 3 页 #main_menu ， #first_map ， #second_map 当我进入 #second_map 页面时，当我按下返回按钮时它应该转到 #first_page 但实际上它显示的 #main_menu 页面没有 CSS 样式。你能告诉我是什么问题以及我们如何解决它提前谢谢你。我提供源代码：这是 main_page 

            </div>
            <h2 id="thx_msg" style="margin:0 auto;"></h2>
           <div class="grid2">
                <div class="first" id="search_btn">
                    <div>
                        <img src="images/loupe.jpg"/>
                    <div>
                    </div>Search for a Spot</div>
                </div>
                <div class="second" id="submit_spot_btn">
                    <div>
                        <img src="images/spot.jpg"/>
                    </div>
                    <div>Submit a spot</div>
                </div>
            </div>
            <ul style="margin:0 auto;" class="spaced_list" style="widht:280px;" >
                <li><input type="button" data-role="none" value="Account info" class="btn" style="margin:0 auto;" id="main_page_account_info"/></li>
                <li><input type="button" data-role="none" value="Log Out" class="btn" style="margin:0 auto;"id="main_page_log_out"/></li>
            </ul>
     </div>

这里是 first_map 页面被命名为 spot_page

<div data-role="page" id="spot_page" data-theme="b">
<div data-role="header" style="overflow:hidden;">
    <img class="logo_icon" src="images/logo_icon.png">
</div><!-- header -->
<div class="clear"></div>
<div id="search_form_holder" style="margin:0px 25px" >
    <p class="center" style="font-size:16px;font-weight:bold;">
        Search for a Spot
    </p>
    <ul class="some_space" style="margin:0 auto;
                                        margin-left:auto;
                                        margin-right:auto;
                                        align:center;
                                        text-align:center;
                                        width:280px;">
    <li><input type="text" id="address_zip" class="field black" placeholder="Address/Zip Code"/></li>
    <li id="to"></li>
    <li><input type="button" data-role="none" style="width:200px;margin:15px auto;" id="search_spot_btn" class="btn" value="Search for a Spot"></li>
    </ul>
    <div id="hidden_scroller" style="display:none">
    <select id="distance" name="Within">
            <option value="1">1 Mile</option>
            <option value="3">3 Miles</option>
            <option value="5">5 Miles</option>
            <option value="10">10 Miles</option>
        </select>
    </div>
</div><!-- search form -->
<div id="first_map" style="width: 100%;
                            height: 247px;border:1px solid black;margin:0 auto">

</div>
</div><!-- split  view -->

最后是第二张地图：

        <div data-role="page" id="nearby_page">
        <div data-role="header" style="overflow:hidden;">
            <img class="logo_icon" src="images/logo_icon.png">
        </div><!-- header -->
        <div class="clear"></div>
        <div class="second_header">Spots nearby</div>
        <div id="map" style="width: 100%;
                            height: 398px;border:1px solid black;margin:0 auto">

        </div>
    </div>

如您所见，页面彼此分开。
我有最后一个问题，导航插件是否可以帮助解决像 jquery 历史插件这样的问题，感谢您的帮助。

4

1 回答 1

1

确保将您的页面放在不同的单独页面上。如果不是这样，就会发生这种错误。大多数情况下，您会遇到异常导航错误。这就是我在我的经历中所经历的。

顺便说一句，您应该向这里的人们展示更多代码以帮助您。

更新

PhoneGap 和 Android 的后退按钮的行为确实很奇怪。我在我的应用程序中所做的是禁用后退按钮并在顶部标题上提供软后退按钮。Simplehistory.back()将为后退按钮带来魔力。

您可以按如下方式禁用。

$(function(){
    document.addEventListener("deviceready", onDeviceReady, false);
})

// PhoneGap is loaded and it is now safe to call PhoneGap methods
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
    console.log("Back button pressed but nothing happened");
}

无论如何，这是我的方法。你可以选择与众不同。

于 2013-03-05T04:23:00.533 回答