Changing the query string without reloading the page

Question

I am creating a photo gallery and want to be able to change the query string and title when viewing photos.

The behavior I'm looking for is often found with some implementations of a continuous / infinite page, where when you scroll down, the query string continues to increment the page number ( http://x.com?page=4 ), etc. This should be simple in theory, but I would like something safe in major browsers.

I found this great post and tried to follow the example with window.history.pushstate , but this does not seem to work for me. And I'm not sure if this is perfect, because I don’t care about changing the browser history.

I just want to offer the ability to bookmark the currently viewed photo without reloading the page every time the photo changes.

The following is an example of an endless page that modifies the query string: http://tumbledry.org/

UPDATE found this method:

 window.location.href = window.location.href + '#abc'; 

It works for me, but I'm on a new chrome. This could probably cause some problems with older browsers?

Answer 1

If you are looking for a Hash modification, your solution works fine. However, if you want to change the request, you can use pushState, as you said. Here is an example that can help you implement it correctly. I tested and worked fine:

 if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1'; window.history.pushState({path:newurl},'',newurl); } 

It does not reload the page, but allows you to change the URL request. You cannot change the protocol or host values. And of course, this requires modern browsers that can handle the HTML5 history API.

For more information:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Answer 2

I used the following JavaScript library with great success:

https://github.com/balupton/jquery-history

It supports the HTML5 history API, as well as a fallback method (using #) for older browsers.

This library is essentially a polyfill around `history.pushState '.

Answer 3

Based on Fabio's answer, I created two functions that are likely to be useful to anyone who comes across this question. With these two functions, you can call insertParam() with the key and value as an argument. It will either add a URL parameter, or if the request parameter already exists with the same key, it will change this parameter to a new value:

 //function to remove query params from a URL function removeURLParameter(url, parameter) { //better to use l.search if you have a location/link object var urlparts= url.split('?'); if (urlparts.length>=2) { var prefix= encodeURIComponent(parameter)+'='; var pars= urlparts[1].split(/[&;]/g); //reverse iteration as may be destructive for (var i= pars.length; i-- > 0;) { //idiom for string.startsWith if (pars[i].lastIndexOf(prefix, 0) !== -1) { pars.splice(i, 1); } } url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ""); return url; } else { return url; } } function insertParam(key, value) { if (history.pushState) { // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1'; var currentUrl = window.location.href; //remove any param for the same key var currentUrl = removeURLParameter(currentUrl, key); //figure out if we need to add the param with a ? or a & var queryStart; if(currentUrl.indexOf('?') !== -1){ queryStart = '&'; } else { queryStart = '?'; } var newurl = currentUrl + queryStart + key + '=' + value window.history.pushState({path:newurl},'',newurl); } } 

Answer 4

Then the story API is exactly what you are looking for. If you also want to support legacy browsers, then find a library that returns to processing the URL tag if the browser does not provide a history API.

Answer 5

I want to improve Fabio's answer and create a function that adds a custom key to a URL bar without reloading the page.

 function insertUrlParam(key, value) { if (history.pushState) { let searchParams = new URLSearchParams(window.location.search); searchParams.set(key, value); let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString(); window.history.pushState({path: newurl}, '', newurl); } }