使用JQuery和HTML5在Worklight中將歷史記錄綁定到後退按鈕歷史記錄

我已經看到了一些關於此的討論，但他們都假設頁面上有一個按鈕供用戶返回。我正在使用jQuery在Worklight中加載和卸載來創建多頁表單。對於那些熟悉WL的人來說，這是基於他們的多頁面應用示例。基本上，Web應用程序負載時，它使用pagePort顯示的內容：使用JQuery和HTML5在Worklight中將歷史記錄綁定到後退按鈕歷史記錄

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和TH用戶可以在輸入信息後繼續進入表單的下一頁，然後再單擊繼續。請注意，此多頁面表單在每個頁面上只有1個繼續按鈕，並且沒有其他按鈕可用...不要問我爲什麼...

因此，他們必須返回的唯一選項是瀏覽器後退按鈕是可用的，因爲我只是用history.pushState操作瀏覽器歷史記錄。但是，當我單擊瀏覽器後退按鈕時，只有URL會更改，但不會更改頁面。

所以我的問題是...有沒有一種簡單的方法將後退按鈕綁定到我使用pushState追加URL創建的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]; 
} 
};

哦，插件是不是一種選擇...

來源

2013-01-24 isaac weathers

您可以使用WL.App.overrideBackButton。

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

來源

2013-02-14 11:50:40

使用JQuery和HTML5在Worklight中將歷史記錄綁定到後退按鈕歷史記錄

回答

相關問題