How to use the History object in javascript

length

The history.length property stores the number of URLs in the history. Initially, this value is 1. Since the IE10 browser returns 2 initially, there is a compatibility issue, so this value is not commonly used

Jump method

go(), back() and forward()

If the moved position exceeds the boundary of the access history, the above three methods will not report an error, but fail silently

[Note] When using history records, the page is usually loaded from the browser cache. Instead of asking the server to send a new web page again. Does not trigger onload

Add and modify records

HTML5 adds two new methods to the history object, history.pushState() and history.replaceState(), which are used to add and modify the browsing history Record. The state attribute is used to save the record object, and the popstate event is used to monitor changes in the history object

　[Note] IE9 does not support

　[pushState()]

　 History.pushState () method adds a state to the browser history. The pushState() method takes three parameters: a state object, a title (now ignored), and an optional URL address

　 history.pushState(state, title, url);

　　State object - The state object is a JavaScript object created by the pushState() method and related to the history record. When the user is directed to a new state, the popstate event is triggered. The event's state property contains the history's state object. If you don’t need this object, you can fill in null

Title - the title of the new page, but all browsers currently ignore this value, so you can fill in null

here URL - this The parameter provides the address of the new history record. The new URL must be in the same domain as the current URL, otherwise pushState() will throw an exception. This parameter is optional. If it is not specifically marked, it will be set to the current URL of the document

. Assuming that the current URL is example.com/1.html, use the pushState method to add it to the browsing record (history object). A new record

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

After adding the new record above, the browser address bar immediately displays example.com/2.html, but it will not jump to 2.html, or even check 2.html. If it exists, it just becomes the latest entry in your browsing history. If you visit google.com at this time, and then click the back button, the URL of the page will display 2.html, but the content will still be the original 1.html. Click the rewind button again, and the url will display 1.html, with the content unchanged

In short, the pushState method will not trigger a page refresh, but will only cause the history object to change and the displayed address in the address bar to change

If the url parameter of pushState sets a new anchor value (i.e. hash), the hashchange event will not be triggered, even if the new URL is only different from the old one in hash

If set If a cross-domain URL is specified, an error will be reported. The purpose of this design is to prevent malicious code from making users think they are on another website

　[replaceState()]

The parameters of the history.replaceState method are exactly the same as the pushState method, with the difference The replaceState() method will modify the current history entry instead of creating a new entry

Assume that the current web page is example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

【state】

The history.state property returns the state object of the current page

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

　[popstate event]

Whenever the browsing history of the same document (that is, the history object) changes, the popstate event will be triggered

[Note] It should be noted that just calling the pushState method or replaceState method will not trigger this event. Only the user clicks the browser back button and forward button, or uses javascript to call back(), forward() , go() method will only be triggered. In addition, this event only targets the same document. If the browsing history is switched and different documents are loaded, the event will not be triggered.

When used, you can specify a callback function for the popstate event. The parameter of this callback function is an event event object, and its state attribute points to the state object provided by the pushState and replaceState methods for the current URL (that is, the first parameter of these two methods)

In the above code event.state is the state object bound to the current URL through the pushState and replaceState methods

This state object can also be read directly through the history object

　　var currentState = history.state;

round trip cache

By default, the browser will cache the page in the current session. When the user clicks the "Forward" or "Back" button, the browser will load the page from the cache.

The browser has a feature Called "back-forward cache" (bfcache), it can speed up page conversions when users use the browser's "back" and "forward" buttons. This cache not only saves page data, but also saves the state of DOM and javascript; in fact, the entire page is saved in memory. If the page is located in bfcache, the load event will not be triggered when the page is opened again

　[Note] IE10-the browser does not support

　[pageshow]

　　pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数

　　第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

　　[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window

　　pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true

　　[注意]上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了

　　【pagehide】

　　与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象

　　[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常

　　pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。如果页面是从bfcache中加载的，那么persisted的值就是true；如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。因此，当第一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法：

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容html4，也可以监听pushState与replaceSate

The above is the detailed content of How to use the History object in javascript. For more information, please follow other related articles on the PHP Chinese website!