For example, in page A, A collapsed list (made with jquery) is opened, A scroll bar is dragged down, and A button in the list is used to jump to page B, there is A goback button in page B. You can click it to jump back to page A. When you jump back to page A, the scroll bar remains in the status when you left, and the previously opened folding list should be kept open. What html5API or jqueryAPI can be implemented? Ps: I tried history in jquery. back (), you can implement A scroll bar position, for example, opening A collapsed list (made with jquery) at the midpoint of page A, and dragging A scroll bar down, then, you can jump to page B through A button in the list. There is A goback button in page B. Click it to jump back to page A. When you jump back to page A, the scroll bar remains in the status when you left, and the previously opened folding list should be kept open. What html5 APIs or jquery APIs can be implemented?
Ps: I tried history. back () in jquery to keep the position of the scroll bar unchanged, but the collapsed list changes to the initial state (that is to say, it is the same as refreshing the page ). Reply content: Thank you for your invitation.
It's a coincidence that I did this three or four days ago.
There are two pages. One is
List page:
One is One is
Content Page:
First go to the List page:
You can see that the List page is expanded with an anchor. When the list page is loaded, if JS detects an anchor on the URL, it expands the corresponding folding list; if there is no anchor in the URL, expand the first one without scrolling the scroll bar.
Use history when you click panel-heading in the collapse list. pushState (null, null, url): Change the anchor on the URL, expand the collapsed list, and scroll to the top of the collapsed list.
Then let's talk about "return" on the Content Page 」:
First, you must determine what the portal link is. Use document. referrer.
Then there may be two situations:
1. the user enters the content page from your folding list, so you can use history. back (), then use history. pushState () changes to the anchor and automatically expands and scrolls to the collapsed list corresponding to the anchor.
2. the user directly enters the link in the address bar. At this time, you can directly use location. href = url to jump to its upper-level link.
You can view the specific effect on our website: zhijieke-make learning more interesting.
To enter the content page, you must log on to the console ~ You can use a URL to save the status, and then use the URL for event-driven. The advantage is that the status of each page is saved in its own URL. no matter whether the browser is used to move forward or backward or share the current link with others, the page status will not be lost.
The driver process is divided into the following steps:
Modify URL (trigger)-> parse URL-> call the corresponding callback (listener)
Where:
- To avoid page refreshing, you must use URL hash or history. pushState () to modify the URL ().
- Register listener, parse URL, and call listener. (When I was young, I also created a front-end routing wheel PRouter. js.. (Escape
Of course, if you do not want to save some statuses in the URL, you can also save them in localStorage. But what remains unchanged is
You must use the status to drive the page behavior, instead of executing the page behavior first and then saving the status.. Simple states can be placed in hash.
The complex points can be stored in localstorage or sessionstorage.
If it is more complex, we recommend that you cascade multiple views so that no matter how complicated the status is, the subject will be saved. If you use the traditional full page refresh mode, the "cooperation" solution of the hash tag + jQuery plug-in response is required. But this is really unnecessary. The repeated loading, parsing, execution, and rendering generated by switching between subtopic pages will be a waste of performance ......
Therefore, the famous AJAX mode "partial refresh" is naturally an excellent solution for "partial resident" (Outlook Web version in IE 6 is the earliest implementation )~
In addition, jQuery's load () instance method has encapsulated AJAX Get requests, jQuery empty (), and jQuery html () to implement partial refresh in minutes ~
The above is the "forward phase" of the user's browsing process, and the "Backward phase" requires a historical record at the time of advance, then withdraw from the user (the browser backend function or the user triggers the front-end engineer to include history. back () called code) restores the previously refreshed Body Sub-pages, and points the global navigation menu in the main framework of the page to the corresponding entries. The technology that records historical information for AJAX is HTML 5 History API (history. pushState () is the most commonly used method). For IE 8/9, window is used. onhashchange is compatible. IE 6/7 can only use settimeout () to simulate hashchange events or use iframe windows. history to record windows. the AJAX history of parent ~
The above is compatible with existing mature open-source libraries on Github, as well as a mature framework combining AJAX and pushState-PJAX ~
(People who are used to jQuery-style APIs, I suggest my own DEVELOPMENT OF THE PJAX pattern framework -- EasyWebApp, hosted in Git @ OSC -- http://git.oschina.net/Tech_Query/EasyWebApp
The structure of a webpage should not be returned, but only forward.
The returned part is taken by the browser.
Customize a link to jump to another page. Add Hash and other status recognition to the target page. Three methods 1, hash 2, localstroge 3, cookie previously used localstorage, push the status to be saved to an object, and judge the object when loading the page, however, localstorage cannot set the life cycle, that is, you cannot clear it when the user leaves your page. Therefore, we recommend that you try sessionstorage, which will be cleared when the user leaves in the same way as session usage.
