js click return to jump to the specified page implementation process_javascript skills

This function has been briefly introduced before. This time I will explain the principle and existing problems in detail (because it uses the new API of html5, there are compatibility issues. It is recommended to use this method on mobile terminals).

Function description:

Create a new tab in the browser and specify a URL. After the web page is loaded, clicking back is not allowed under normal procedures. Because there is no relevant history record for the current tab page, there is no record to return.

At the request of the customer, in this case, a link (such as the home page) needs to be added to his history record, so that on the newly opened page, clicking return can jump to the home page, allowing the user to see the system's Various functions, promotion platform.

1. Key points of knowledge

HTML5 introduces the history.pushState() method and the history.replaceState() method, which allow you to add and modify history entries one by one. These methods work in conjunction with the window.onpopstate event.

Case:
Assume http://mozilla.org/foo.html will execute the following JavaScript code:

Copy code The code is as follows:

var stateObj = { foo: "bar" }; history.pushState( stateObj, "page 2", "bar.html");

This will cause the browser's address bar to display http://mozilla.org/bar.html, but will not load the bar.html page nor check bar. html exists.

Suppose the user now navigates to http://google.com, and then clicks the back button. At this time, the address bar will display http: //mozilla.org/bar.html, and the page will trigger the popstate event. The state object in this event contains a copy of stateObj. The page looks like foo.html, although the page content may have been modified in the popstate event.

If we click the back button again, the URL will change back to http://mozilla.org/foo.html The document will trigger another popstate event, this time for the state object is null. Rolling back also does not change the document content.

pushState() method
pushState() takes three parameters: a state object, a title (now ignored), and an optional URL. Let’s examine the details of these three parameters individually:

state object — A JavaScript object associated with a new history entry created with the pushState() method. Whenever the user navigates to a newly created state, the popstate event is fired, and the event object's state property contains a copy of the history entry's state object.

Any serializable object can be used as a state object. Because the FireFox browser saves state objects to the user's hard drive so that they can be restored after the user restarts the browser, we impose a limit on the size of state objects to 640k. If you pass a state object that exceeds this limit to the pushState() method, the method will throw an exception. If you need to store large amounts of data, it is recommended to use sessionStorage or localStorage.

title — FireFox currently ignores this parameter, although it may be used in the future. Considering that this method may be modified in the future, it is safer to pass an empty string. Alternatively, you can pass in a short title indicating the state you are about to enter.

Address (URL) — The address of the new history entry. The browser will not load the address after calling the pushState() method, but may attempt to load it later, such as when the user restarts the browser. The new URL does not have to be an absolute path; if it is a relative path, it will be based on the current URL; the incoming URL and the current URL should have the same origin, otherwise, pushState() will throw an exception. This parameter is optional; if not specified, it will be the current URL of the document.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) to Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the incoming objects are serialized using JSON. Starting with Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), objects are serialized using the structured copy algorithm. This will allow more types of objects to be passed in safely.
In a sense, calling pushState() is similar to setting window.location='#foo' in that it creates and activates a new history entry within the current document. But pushState() has its own advantages:

1. The new URL can be any same-origin URL. On the contrary, when using the window.location method, only modifying the hash can ensure that it stays in the same document.

2. Decide whether to modify the URL according to personal needs. Instead, setting window.location='#foo' creates a new history record only if the current hash value is not foo.

3. You can add abstract data to new history entries. If you use hash-based methods, you can only transcode the relevant data into a very short string.

Note that the pushState() method will never trigger the hashchange event, even if the new address only changes the hash.

popstate event
Whenever the activated history changes, the popstate event is fired. If the activated history entry was created by pushState, or affected by the replaceState method, the popstate event's state property will contain a copy of the history's state object.

replaceState() method
The history.replaceState() operation is similar to history.pushState(), except that the replaceState() method modifies the current history entry rather than creating a new entry.

Using the replaceState() method is particularly appropriate when you want to update the state object or URL of the current history entry in response to some user operation.

2. Implementation ideas
1. Use the popstate event to monitor the click return event.

2. When the event is triggered, determine whether there is a page in the history of the current page that can be returned.

3. If there is no page to return to, insert two records:

1), designated jump page.

2), empty record. (Keep the current page unchanged)

3. Implementation method

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

Determine the number of records in the current history, because when the page is loaded, the browser will automatically push a record. So we need to judge whether the length is less than 2.

The state object inserted is to obtain the corresponding url link.
Note:
In the first pushState, I put the jump url into the state object to facilitate the jump operation. The second parameter has no practical meaning because current browsers basically do not support this parameter.
The third parameter will replace the link in the current address bar, but the page will not jump. (I made a mistake before, setting the third parameter to the homepage link, which caused the address bar to be changed to the homepage link, so that the links on the current page jumped based on the homepage, causing all links on the page to jump. Wrong transfer )

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

This code is placed and executed in the ready event of the page. The delay of 300 milliseconds is to delay the operation and prevent conflict with the system pop event.
The if statement is to determine whether there is a state object in history, because only records that meet our requirements will have the state object we added, so based on this point, the page jump operation can be performed.
This will achieve the effect we want.
4. Write at the end
Disadvantages:
1. Obviously, as mentioned at the beginning. Only suitable for browsers that support HTML5.
2. Since two records are inserted, similar to the return on mobile terminals such as WeChat, you need to click return twice more to launch the page and return to the WeChat chat window, which is a bad user experience.

Summary:
This method can definitely be optimized and perfected, but currently my strength is insufficient to perfect it.

I hope friends who read this article can get some inspiration or find a better way to achieve it.