后退按钮不加载页面内容 - JQuery Mobile答案

【问题标题】：Back button not loading page content - JQuery Mobile后退按钮不加载页面内容 - JQuery Mobile
【发布时间】：2015-10-19 15:51:48
【问题描述】：

我正在 jquery mobile 上构建一个混合应用程序，我想使用后退按钮在不同页面之间导航。

我创建了后退按钮，它确实加载了最后一页的url，但它没有刷新页面内容（它一直显示相同的页面，即：按钮没有实现该功能）

查看之前关于后退按钮的问题 - jquery mobile 我找不到一个暴露页面加载问题的问题（因为我说过按钮获取正确的 url 但不加载页面内容）

注意：我使用的是 IBM Mobile First

<a href="#loginPage" data-direction="reverse" data-role="button"
            id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
            data-corners="false">Button</a>

（我想从主页面移动——>登录页面）

【问题讨论】：

加载缓存页面是后退按钮的默认功能。您是否有理由对这种安排抱有不同的期望？
当点击按钮时，它实际上在导航栏中显示了正确的url，但它没有刷新页面。如果还不够清楚，请告诉我。
@isherwood 我猜你没听懂他说的，他做了一个叫“后退按钮”的按钮，它不是默认的后退按钮
我明白这一点，但几乎所有“返回”历史状态操作的默认行为都是加载缓存页面。

标签： javascript jquery html jquery-mobile

【解决方案1】：

您的 HTML 按钮标签在 JSfiddle 中运行良好：

https://jsfiddle.net/pengyanb/a8pzr7gt/6/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

<div data-role="page" id="mainPage" data-theme="a">
    <div data-role="header" data-position="fixed">
        <a href="#loginPage" data-direction="reverse" data-role="button"
            id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
            data-corners="false">Button</a>
        <h5>Main Page</h5>
    </div>
    <div data-role="main" class="ui-content">
        <h2>This is Main Page</h2>
    </div>
</div>


<div data-role="page" id="loginPage" data-theme="a">
    <div data-role="header" data-position="fixed">
        
          <a href="#mainPage" data-direction="reverse" data-role="button"
            id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
            data-corners="false">Button</a>
        <h5>Login Page</h5>
    </div>
    <div data-role="main" class="ui-content">
        <h2>This is Login Page</h2>
    </div>
</div>

也许尝试检查您的标签 ID 是否正确分配？

【讨论】：

【解决方案2】：

您可以在这里尝试使用 data-ajax="false"：

<a href="#loginPage" data-ajax="false" data-direction="reverse" data-role="button"
        id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
        data-corners="false">Button</a>

【讨论】：