All geek questions in one place

How does Facebook change the URL in the address bar of the browser without reloading the page or using # or?

A few months ago I saw a new function deployed to vkontakte.ru (Russian FB): when switching between user pages, the browser does not restart. Instead, the new page gets preloaded and then displayed. The music player that is on the page (tied to the top of the footer) continues to play without interruption.

However, the URL in the address bar of the browser is changed, not with a hash tag or query string.

So, my page is vk.com/myPage ... I click a friend, his page preloads, then displays when the URL in the address bar of the browser changes to vk.com/myfriendJoe and the browser does not restart.

Please note that it only works with the latest browsers, such as later versions of Safari and Chrome; for others, such as Firefox 3.6, it implements a reserve that uses hashtags and query strings.

I did some research and found window.history.pushState , but it only works with query strings.

Any ideas would be highly appreciated. Thanks.

+6
source share
3 answers

This is the new story API defined by HTML5. Here you can see another demo here . You are absolutely right that pushState does pushState , but it doesn’t just work with query strings (as this page demonstrates using relative root URLs like /history/first and /history/second ).

+1
source

If you are using a modern HTML5-compatible browser, you can use the history.pushState() API.

More details here: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

+1
source

Is a site using ajax calls behind the scenes to re-populate a specific section of a page with new content? This is one way to not change the URL.

-2
source

Source: https://habr.com/ru/post/893369/

More articles:


All Articles