jQuery Mobile - 返回按钮

Question

我正在使用jQuery Mobile 4.1开发应用程序。

我的应用程序中有两个网页，分别是login.html和home.html。在home.html中，有三个页面，分别是menupage、searchpage和resultpage。

项目流程为：login.html--->home.html。在home.html中，menupage被显示为第一个页面。如果我在menupage中选择了某个选项，则会移动到searchpage，然后再到resultpage。假设我当前在resultpage中。如果我在移动端浏览器（iPhone-safari、Android-chrome）上点击返回按钮，则会返回到login.html。

但我想显示searchPage，如何解决这个问题？是否可以实现？

[注：这些页面都应该在单个html页面home.html中]

- Finder

---

我也有同样的问题链接。有人有解决方案吗？ - PPD

Answer 1

使用属性data-rel="back"替代哈希导航，在锚点标签上，这将带您返回到上一页。

查看后退链接：这里

- Phill Pafford

---

谢谢。但是我想通过浏览器的后退按钮来返回上一页。 - Finder

默认情况下，浏览器的返回按钮会将您带回上一页，那么为什么还需要编写代码呢？ - Phill Pafford

在我的示例中，当我在浏览器上点击后退按钮时，浏览器的后退按钮会将我带回到login.html页面（请注意：我当前位于home.html的resultpage页面）。 - Finder

感谢@PhillPafford。最终我选择使用<a href="javascript:history.go(-1)">返回</a>。 - H. Ferrence

如果您删除 href 并仅使用 data-rel="back"，它也可以正常工作。 - Daniel

Answer 2

最新版本的JQuery Mobile API（我猜比1.5更新）要求在每个页面的标题栏或底部显式添加“返回”按钮。

因此，请尝试在您的页面div标签中添加以下内容：

data-add-back-btn="true"
data-back-btn-text="Back"

例子：

<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="Back">

- Dr Zeeshan Patoli

---

这个对我有用，但是如何添加一个图标呢？我尝试了data-icon="back"，但按钮就消失了。 - Jez D

Answer 3

尝试

$(document).ready(function(){
    $('mybutton').click(function(){
        parent.history.back();
        return false;
    });
});

或者

$(document).ready(function(){
    $('mybutton').click(function(){
        parent.history.back();

    });
});

- Steven Lizarazo

Answer 4

您可以将以下脚本放在HTML代码头部尝试：

您可以将以下脚本放在HTML代码头部尝试：

<script>
   $.extend(  $.mobile , {
   ajaxEnabled: false,
   hashListeningEnabled: false
   });
</script>

- shani

Answer 5

如果您不想跟踪历史记录，可以使用jquery mobile中的nonHistorySelectors选项。您可以在此处找到详细的文档 http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html

- Yekmer Simsek

Answer 6

尝试使用li可以更加均匀

<ul>
 <li><a href="#one"  data-role="button" role="button">back</a></li>
 </ul>

- Chang Federico

Answer 7

这是针对1.4.4版本的

  <div data-role="header" >
        <h1>CHANGE HOUSE ANIMATION</h1>
        <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all"  data-role="button" role="button">Back</a>
    </div>

- Shivek Parmar

---

当您设置 data-role=button 等时，不应添加那些类。大多数类都是不必要的，而那些需要执行操作的类应该被替换为 data-icon 和 data-iconpos 的正确值。 - naugtur