|
|
Posted on 9/12/2017 1:55:04 PM
|
|
|
|
Introduced since Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduces two methods, histtory.pushState() and history.replaceState(), which allow the addition and modification of history entities. At the same time, these methods work with the window.onpostate event.
Modify the referrer using the history.pushState() method, which can be used in the http header created for the xmlhttpRequest object after the state has been modified. This referrer will be the URL of the document when the XMLHttpRequest was created.
pushState is used to add a record of the current page to history, while replaceState and pushState are used exactly the same, the only difference is that it is used to modify the record of the current page in history.
example
Suppose http://mozilla.org/foo.html page executes JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
This method will make the URL address bar display http://mozilla.org/bar.html,But the browser won't load bar.html page, even if it exists。
Now again assume that the user continues to access the http://google.com and clicks back. At this time, the url address bar will, http://mozilla.org/bar.html, the page will get a popstate event (chrome), which will contain a copy of stateObj. This page looks like foo.html. +
At this point, we click back again, and the URL will turn http://mozilla.org/foo.html,document will get another popstate event and a null state object. This return action does not change the content of the document. (Maybe after a while it will try to load...) chrome）
pushState method
pushState() has three parameters: state object, title (now ignored, unhandled), URL (optional). Specifics:
· state object – The state object is a Javascrip{filter}t object that relates to a new history entity created by the pushState() method. Used to store information about the entries you want to insert into the history. The State object can be any Json string. Because Firefox uses the user's hard drive to access the state object, the maximum storage space of this object is 640k. If it is greater than this value, the pushState() method throws an exception. If you do need more space to store, use local storage.
· title—Firefox ignores this parameter now, although it may be used in the future. The safest way to use it now is to pass an empty string to prevent future modifications. Or you can pass a short title to indicate the state
· URL - This parameter is used to pass the URL of the new history entity, note that the browser will not load this URL after calling the pushState() method. But maybe after a while it will try to load this URL. For example, after the user restarts the browser, the new URL can be not an absolute path. If it is a relative path, then it will be relative to the existing URL. The new url must be co-domain with the existing url, otherwise pushState() will throw an exception. This parameter is optional, and if empty, it will be placed as the current URL of the document.
In a sense, calling the pushState() method is much like setting window.locatio{filter}n = "#foo", both of which create and activate another history entity associated with the current document, but pushState() has some additional advantages:
The new URL can be any URL that is in the same domain as the current URL, as opposed to window.locatio{filter}n staying in the same document if only hash is set.
l You can leave the URL unmodified if you don't need to. For comparison, set window.locatio{filter}n = "#foo"; Only new history entities are generated, if your current hash is not #foo
You can associate arbitrary data with your new history entity. With a hash-based approach, all relevant data needs to be encoded into a short string.
Note that the pushState() method does not make the hashchange time happen, even if the old and new urls are just different hashes.
replaceState() method
history.replaceState() is used a lot like pushState(), except that replaceState() is used to modify the current history entity instead of creating a new one. This method can sometimes be useful when you need to update a state object or the current history entity in response to certain user behavior, and you can use it to update the URL of the state object or the current history entity.
popstate event
When the history entity is changed, the popstate event will occur. If the history entity is generated by the pushState and replaceState methods, the state attribute of the popstate event will contain a copy of the state object from the history entity
See window.onpopstate for details
Read the current state
Read the existing state
When the page loads, it may have a non-empty state object. This can happen when the page sets a state object (using pushState or replaceState) and the user restarts the browser. When the page reloads, the page will receive an onload event, but there will be no popstate event. However, if you read the history.state property, you will get this state object after the popstate event occurs
History.pushState() documentation: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
The parameter of the receiving URL is of type string, which is used to change the URL of the current address bar. One thing to note is that this parameter cannot be the same as cross-domain, that is, the protocol, domain name, and port must be the same.
Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://www.test.com/' cannot be created in a document with origin ' https://www.itsvse.com' and URL 'https://www.itsvse.com/'.
at <anonymous>:1:9
Correct code:
|
Previous:Baidu Maps gets the coordinate points of the areaNext:Huawei engineers mistakenly deleted user data, causing 800,000 mobile phones in Guangxi Mobile to be unable to make calls
|
Posted on 10/27/2017 9:51:10 AM