After you leave the query list page, it is not easy to return to the List page except by backspace.
The product department uses the pop-up box every time to avoid this problem.
But a bunch of forms are crowded in a small space, which is really bad.
There are two solutions:
A, history. Go (-xxx)
B. Reload the list page, backfill the query conditions, and execute the query.
Solution B: backfill the query form and submit the form using Js. This solution is feasible. I implemented it, but there will be two page refreshes (one loading the query page and one executing the query ), it feels strange. It's better to use history. go (-XXX ).
History. Go is commonly used, but it does not work here, because it is not sure whether the list page is-1,-2 or-X.
History. length is unknown,It refers to the length of the entire browsing history of the current tab, rather than the position of the current page in the entire history queue..
Each time a new page is accessed, the length value is added with 1. Even if it is returned, the length is also a new length.
However, the browser has the following features:
Press the rollback key to roll back to a history page and restore the data on the page before leaving the page,
For example, there is a text box. before leaving, you manually enter a value. After you roll back to this page, the content of this text box is still the value you manually entered.
If this feature is used, the problem mentioned above will be well solved:
A. when loading the query page, use js to assign the current history. Length value to a hidden input.
B. When the page leaves, write the value to the cookie.
C. On the page that needs to be returned to the List page, obtain the cookie value and calculate X of history. Go (-x) with the current history. length.
1 var indexpagehelper ={}; 2 (function (I) {3 I. sethistory = function () {4 // do the following actions when page loading is complete: 5 $ (function () {6 // do not try to dynamically create this hidden input, dynamically created, 7 // if it is dynamically created, the hidden input cannot be restored during rollback, and the hidden input will be appended to 8 // if ($ ("# historyindex") each time "). length = 0) 9 // $ ("<input type = 'den den 'Id = 'historyindex'/> "). appendto (document. body); 10 11 if ($ ("# historyindex "). val () = "") {12 // The new page will execute 13 var STR = history. length + "|" + location. pathname; 14 $ ("# historyindex "). val (STR); 15 cookiehelper. set ("historyindex", STR, null, "/"); 16} else {17 // The rollback page will execute 18 // cookiehelper. set ("historyindex", $ ("# historyindex "). val (), null, "/"); 19} 20}); 21} 22 23 24 I. gotoindex = function (defaulthref) {25 var TMP = cookiehelper. get ("historyindex "). split ("|"); 26 var idx = TMP [0]; 27 var Path = TMP [1]; 28 var backcount = math. ABS (history. length-idx); 29 If (backcount> 0 & path. indexof (defaulthref)> = 0) 30 history. go (-backcount); 31 else {32 location. href = defaulthref; 33} 34}; 35 36}) (indexpagehelper );
Note the following code:
A. the hidden input cannot be dynamically created using Js. It cannot be restored during rollback.
To prove that the dynamically created input cannot be restored, let me write a simple example:
1 <HTML> 2
B. The code in sethistory must be executed after the page is loaded. When the page is added, I used $ (function () {...}) to package a layer.
If you do not wait for the page to be loaded, read the historyindex value, which is not available because the browser has not restored the data (at least this is the case for debugging in ie11 ).
What needs to be done now is
Call the indexpagehelper. sethistory method on the list page,
Call the indexpagehelper. gotoindex method on the Click Event of the return list button on the subpage.
Go to the History List page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
