CODEWITHSUNDEEP
javascriptjqueryasp.neturlquery-string
JSON
JSON

Reputation: 1623

Adding/Removing parameters to URL without Postback (Function of query string)

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`

Upvotes: 0

Views: 635

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14541

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

Upvotes: 1

Related Questions