0

Until now I believed that it was not possible for the HTML source of a page to be modified without reloading it entirely. I suspect what I've just seen is somehow related to pushState (but not only that): on the Quartz website (qz.com), you seamlessly slide to the next article once you've reached the bottom of the one you're reading, with a clean update of the URL and, amazingly, an updated HTML source.

For an example, scroll down any article, e.g.: http://qz.com/643497/we-are-witnessing-the-rise-of-global-authoritarianism-on-a-chilling-scale/

Maybe I've missed something, but could someone explain how this is done? Which HTML5 APIs are being used here?

NOTE: My question specifically focuses on updating the HTML content which you can seen when displaying the page source (not the DOM inspector, obviously).

Nicolas Le Thierry d'Ennequin
  • 6,004
  • 5
  • 37
  • 56
  • Looks to me they are using backbone to make it a single page application. – httpNick Mar 21 '16 at 21:51
  • @httpNick I can't see backbone in the sources in the dev tools – Paul Fitzgerald Mar 21 '16 at 21:58
  • the fact of which library is used doesn't matter. This can be done in vanilla js easily using XHR and pushState and I think we shouldn't make this about a specific library. – Corvus Crypto Mar 21 '16 at 21:59
  • Sorry was just commenting on what I saw, the reason I didn't put it as an answer. It is bundled, you have to search the bundled source to see it being included. – httpNick Mar 21 '16 at 22:00

2 Answers2

0

This looks a lot like your typical asynchronous content loading, but yes they are using pushState to change the url. What is getting you I think is the fact that the routes are well-designed so that going to that URL gives you that same article first. However behind the scenes it is all just a series of JSONP requests combined with pushState() to give a nice flowing, well-formed document. You can even verify the requests using the network tab of any modern debugging console.

See this answer for info on using pushState for url updating :Modify the URL without reloading the page

EDIT

Since you are getting stuck on the fact on how the source is changing, think about it this way: When I say "the routes are well-designed so that going to that URL gives you that same article first" I mean that going to that page will reflect that article. All you are doing by viewing the source is taking the active URL (modified by pushState, so you are really going to a different page to retrieve the source) and grabbing the text without DOM parsing/rendering. I hope that clarifies what is going on in this site in particular.

Community
  • 1
  • 1
Corvus Crypto
  • 2,141
  • 1
  • 13
  • 14
0

You can now do this in most "modern" browsers!

Here is the original article I read (posted July 10, 2010): (HTML5: Changing the browser-URL without refreshing page).

For a more in-depth look into pushState/replaceState/popstate (aka the HTML5 History API) see the MDN docs.

you can do this:

window.history.pushState("object or string", "Title", "/new-url");

El pupi
  • 458
  • 1
  • 3
  • 13
  • Yes, pushState has a state argument (first one) which allows you to save state. But this is a plain JS object, not something you can magically paste to the page source, to my knowledge! – Nicolas Le Thierry d'Ennequin Mar 21 '16 at 22:16