0

How google in their Gmail add and remove parameters from the URL without postback. I m referring here to the way they save your draft, once you hit compose you can see that "?compose=new" parameter is added and once you start composing they give it an ID.

How can I manipulate the URL without postback? I was thinking of using `history.pushState({}, document.title, "?querystring=1")

but I would love to know if there is a better way that is compatible with mobile browsers too

Thanks`

JSON
  • 1,583
  • 4
  • 31
  • 63

1 Answers1

1

Gmail uses a hash in the URL to denote different folders. To give an example, the URL when I open the inbox or important folders are as follows:

https://mail.google.com/mail/u/0/#inbox
https://mail.google.com/mail/u/0/#imp

Notice that inbox and imp are followed by a hash. The meaning of a hash in a URL is that it links to a part of the page. So every time the part of URL after the # changes, browser recognizes that the URL is just pointing to an element within the same page - not to a different page. As a result, a server request is not made.

You can look at these answers to understand more about how you can use javascript to use hash to navigate within a page:

https://stackoverflow.com/a/2835151/5894241

https://stackoverflow.com/a/3163635/5894241

With modern javascript frameworks such as Angular, websites often make use of this feature to make Single Page Applications (SPA). These frameworks would recognize the page to load using the hash value, and then load the content of that page behind the scenes using AJAX and display it without a postback.

You can see how Angular does this here: https://www.w3schools.com/angular/angular_routing.asp

Community
  • 1
  • 1
Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
  • Thanks for the explanation but how can you add a query string and remove it without postback? – JSON Apr 30 '17 at 07:32
  • Well it's simple really. You need to place the querystring after the hash in the URL. For example, in case of gmail, the query string for compose email is like this: `https://mail.google.com/mail/u/0/#inbox?compose=new` and you can test this yourself - append anything to that querystring, and browser will not send a postback. – Nisarg Shah Apr 30 '17 at 07:34