Question

我已经看过一些讨论，但他们都假设页面上有一个按钮供用户返回。我在Worklight中使用jQuery加载和卸载创建一个多页面表单。对于那些熟悉WL的人来说，这是基于他们的多页面应用示例。基本上，当Web应用程序加载时，它使用pagePort显示内容：

function wlCommonInit(){

$("#pagePort").load("www/firstPage.html", function(){
    currentPage.init();
});
}

此时，用户正在看到具有继续按钮的着陆页：

<input type="button" value="Load Page1.html" id="LoadPage1Button" onclick="currentPage.loadPage(1);" />

当用户点击该按钮时，pagePort内容将从开始表单条目的下一页切换出来：

currentPage.init = function () {
  history.pushState({
    page: 2
  }, "Page2", "yourInformation");
};

currentPage.loadPage = function (pageIndex) {
  $("#pagePort").load("www/yourInformation" + ".html", function () {
    currentPage.init();
  });
};

此时，网址将更改为../blah/firstPage.html#yourInformation，用户可以在输入信息后再次单击“继续”继续到表单的下一页。请注意，这个多页表单每页只有1个继续按钮，没有其他按钮可用...不要问我为什么......

因此，他们必须返回的唯一选项是浏览器后退按钮，因为我只是使用history.pushState操作浏览器历史记录。但是，当我单击浏览器后退按钮时，只会更改URL而不会更改页面。

所以我的问题是......有没有一种简单的方法可以将后退按钮绑定到我创建的URL历史记录，方法是使用pushState附加url？我需要做的就是让用户点击后退按钮并被允许转到第一页。

firstPage.html用于点击用户点击后加载页面yourInformation.html页面的JS文件： currentPage = {};

currentPage.init = function () {
  WL.Logger.debug("firstPage :: init");
  history.pushState({
    page: 0
  }, "firstPage");
  history.back(0);
};

currentPage.loadPage = function (pageIndex) {
  $("#pagePort").load("www/yourInformation" + ".html", function () {
    currentPage.init();
  });
};
currentPage.unload = function () {
  $('#pagePort').html('');
    for (var att in currentPage) {
    delete currentPage[att];
 }
};

哦和插件不是一个选项...

Answer 1

您可以使用WL.App.overrideBackButton。

WL.App.overrideBackButton(backFunc);
function backFunc(){
    // put your logic here.
}

使用JQuery和HTML5历史记录将历史记录绑定到Worklight中的后退按钮

1 个答案: