0

我已经看到了一些关于此的讨论，但他们都认为页面上有一个按钮供用户返回。我正在 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();
  });
};

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

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

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

用户单击继续后加载页面 yourInformation.html 页面的 firstPage.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];
 }
};

哦，插件不是一种选择......

4

1 回答 1

1

您可以使用WL.App.overrideBackButton.

WL.App.overrideBackButton(backFunc);
function backFunc(){
    // put your logic here.
}
于 2013-02-14T11:50:40.503 回答