What is the history.pushState function for?

Asked

Viewed 3,877 times

14

I realized that the object history has some relationship with browser history handling. There are methods like go and back which are more understandable, but do not understand very well what makes the function pushState.

What is the purpose of history.pushState?

  • 3

    The pushState function of the javascript History object serves to change the browser url without giving Refresh. Change the url without reloading the page, See more at http://www.tidbits.com.br/pushstate-no-html-pra-mudar-a-url-do-browser-sem-dar-refresh

1 answer

12


How to build sites that take advantage of AJAX principles while still being accessible to search engines?

Answer: A Javascript function that is part of the HTML5 History API, called window.history.pushState(). The pushState function of the javascript History object serves to change the browser url without giving Refresh. Change the url without reloading the page,

Whenever you open a new tab and/or window, the browser starts a new session. And it is in this session that it stores all the Urls you have visited.

The pushState method records a new entry in your session history, keeping the history. And this is your syntax:

window.history.pushState(data, title [, url ] )

data: The parameter data may be useful if you want to use the onPopState event, which is invoked whenever a new entry is registered in your session history;

Title: It’s the title of the page you want the entry to have;

URL: It is the URL you want the page to have. You can use this parameter in two ways:

  • Absolute: Passing all new full URL including protocol, host, path etc. Ex: http://blog.igorescobar.com/;
  • Relative: The URL you pass will be relative to the current URL, ie if you are accessing the http://blog.igorescobar.com/ and pass "/Category/javascript/" to the URL that will be registered is "http://blog.igorescobar.com/category/javascript/".

Example:

window.history.pushState('Object', 'Categoria JavaScript', '/category/javascript/');

Completion

Now with the use of HTML5 we can create websites with AJAX indexable by search engines without problems. Our Link Building will not be compromised and the user experience can be further enhanced, since only a fraction of the delivered code is actually content.

example - Jsfiddle

Browser other questions tagged

You are not signed in. Login or sign up in order to post.