My project consists of 3 pages:
- The main page (index.html) contains a list of items that contain the following anchor <li><a href='item.html?id=1></a></li>
- The item page (item.html) contains a list of item sections and one of these is <li><a href='itemdetails.html?itemid=2></a></li>
- The item details page (itemdetails.html) that gets the id of the item in the pageshow event using the following code:
- function getUrlVars() {
- var vars = [], hash;
- var hashes = window.location.href.slice(window.location.href.indexOf("?") + 1).split("&");
- for(var i = 0; i < hashes.length; i++) {
- hash = hashes[i].split("=");
- vars.push(hash[0]);
- vars[hash[0]] = hash[1];
- }
- return vars;
- }
- itemid = getUrlVars()["itemid"];
The first time, itemdetails.html is loaded, itemid has a value. If we press back button (which is an anchor with data-rel="back"), return to item.html and then open itemdetails.html, itemid is undefined.
It is like appending the previous URL to the current one.