A, the Location,

The Location interface represents the Location (URL) of the object to which it links. The changes made are reflected in the objects associated with them. Both the Document and Window interfaces have such a linked Location, accessed through document. Location and window. Location, respectively.

Location is accessed on document and Window identically.

1.1 the document. The location

Where, for document.location, the property is read-only, but can give the URL value to change the link.

document.location = 'http://www.example.com'
/ / Equivalent to:
document.location.href = 'http://www.example.com'.Copy the code

If you just want to get the URL as a string, you can use the read-only attribute document.url.

document.location.href
//"https://developer.mozilla.org/zh-cn/docs/Web/API/Location"
document.URL
//"https://developer.mozilla.org/zh-cn/docs/Web/API/Location"
// The above is equivalent
Copy the code

1.2 attributes

Location object properties

attribute describe
hash Returns the anchor portion of a URL
host Returns the hostname and port of a URL
hostname Returns the hostname of the URL
href Returns the full URL
pathname The URL pathname returned.
port Returns the port number used by a URL server
protocol Returns a URL protocol
search Returns the query portion of a URL

Location object method

methods instructions
assign() Load a new document
reload() Reload the current document
replace() Replace current document with new document (unable to return to previous page)

1.3 the anchor

HTML5 a tag anchor point use

The hash value of the location is essentially the anchor point

Anchors are implemented via the A link, and prior to HTML5, via the name attribute on the A link (only a can use this attribute, otherwise invalid).

Eg:

<body>
  <a href="#d3">I'm looking for the OA system</a><br/>
  <a name="d1">Zen Way project management software</a>
  <a name="d2">Cicada enterprise portal system</a>
  <a name="d3">Then the collaborative office system</a>
</body>
Copy the code

Html5 is not compatible with the name attribute. Using id means that any element can be jumped as an anchor point.

eg.

<body>
  <a href="#d3">I'm looking for the OA system</a><br/>
  <a id="d1">Zen Way project management software</a>
  <a id="d2">Cicada enterprise portal system</a>
  <h3 id="d3">Then the collaborative office system</h3>
</body>
Copy the code

1.4 the window onhashchange

Hash changes do not refresh the page and therefore do not request data back end, so you can listen for hash changes with window.onhashchange.

Second, the history

The History interface allows you to manipulate the browser’s session History that has been accessed in tabs or frames.

1.1 attributes

History. Length read-only

Returns an integer representing the number of elements in the session history, including the currently loaded page. For example, on a page loaded with a new TAB, this property returns 1.

History.scrollRestoration

Allows Web applications to explicitly set the default scrollback behavior on the history navigation. This property can be auto or manual.

History. The state read-only

Returns a value representing the state at the top of the history stack. This is a way to see the status without waiting for popState events.

1.2 methods

In HTML4, the window.history object was already supported to control the jump of page history. Common methods include:

  • history.forward(); // Go one step further in history
  • history.back(); // Take a step back in history
  • History. go(n): // Skip n steps in the history,n= 0 to refresh the page,n=-1 to back up one page.

In HTML5, the window.history object has been extended with new apis including:

  • History. pushState(data[,title[,url]);// Append a record to history
  • History.replacestate (data[,title[,url]);// Replace the current page in history.
  • history.state; // is a property that gets the state information for the current page.

Note: pushState and replaceState do not refresh the page immediately

1, pushState

In an HTML document, the history.pushState() method adds a state to the history stack of the current browser session.

In a way, calling pushState() is basically the same as window.location = “#foo”; they both create and activate a new history in the current document. But pushState() has the following advantages:

  • The new URL can be any URL of the same origin as the current URL. But setting window.location will only enable the current URL if you only set the anchor.
  • Changing the URL is not mandatory. Instead, setwindow.location = "#foo";A new history will only be created if the anchor value is not #foo.
  • You can associate any data in a new history.window.location = "#foo"You can only write the desired data to the anchor string.

Note: pushState() does not cause a hashchange event call, even if the new URL differs from the previous URL only in the data of the anchor.

2, replaceState

ReplaceState replaces the current URL with a new URL, but does not refresh, even if the new URL does not exist.

Eg:

Suppose mozilla.org/foo.html executes the following JavaScript code:

var stateObj = { foo: "bar" };
history.pushState(stateObj, ""."bar.html");
Copy the code

The explanation for the above two lines can be found in the section “Example of pushState() method”. Then assume that mozilla.org/bar.html executes the following JavaScript code:

history.replaceState(stateObj, ""."bar2.html");
Copy the code

This will make the URL bar display mozilla.org/bar2.html, but will not refresh the bar2.html page or even check for the existence of bar2.html

Assume that the user jumps to www.microsoft.com and then hits the back button. The URL bar will display the mozilla.org/bar2.html page. If the user hits the back button at this point, the URL bar will display the mozilla.org/foo.html page, bypassing the bar.html page.

1.3 the window onpopstate

Triggered when the browser back button is clicked or when js calls forward(), back(), go(). An event object can be passed in to the listener function. Event.state is the data argument passed in via the pushState() or replaceState() methods

Calls to history.pushState() or history.replacEstate () do not trigger popState events. Popstate events are only triggered by certain browser actions, Such as clicking the back or forward button (or calling the history.back(), history.forward(), or history.go() methods in JavaScript), or the anchor point of the A tag.

** Note: ** Both anchor changes and pathname changes trigger the onPopState method, but changing path (replaceState and pushState) does not trigger hashchange.

Popstate and hashchange

Hash mode and History mode

The implementation principles of the two front-end routes (hash mode and History mode) are analyzed and distinguished