Append a param onto the current URL

Question

I'd like to have a little easter egg button in the corner of a project site. When clicked, it just drops a string onto the current url and reloads the page.

So if I'm on: http://test.com/projects/view/134

The button is clicked

Page reload on: http://test.com/projects/view/134?ts=true

Not really sure how I might go about doing so though.

Solution 1

try this code,

var separator = (window.location.href.indexOf("?")===-1)?"?":"&";
window.location.href = window.location.href + separator + "ts=true";

EDITS: to avoid duplicated parameter or very large string in your url, you need to replace the old param it already exists.

var url=window.location.href,
    separator = (url.indexOf("?")===-1)?"?":"&",
    newParam=separator + "ts=true";
    newUrl=url.replace(newParam,"");
    newUrl+=newParam;
    window.location.href =newUrl;

Solution 2

You can assign location.href to the value it currently has, plus your new querystring:

(edited to be friendly to existing querystrings)

$("#yourButtonId").click({
    var loc = location.href;
    if (loc.indexOf("?") === -1)
       loc += "?";
    else
       loc += "&";
    location.href = loc + "ts=true";
});

Or to be more succinct:

$("#yourButtonId").click({
    var loc = location.href;        
    loc += loc.indexOf("?") === -1 ? "?" : "&";

    location.href = loc + "ts=true";
});

Solution 3

Using:

• https://developer.mozilla.org/en-US/docs/Web/API/URL
• https://developer.mozilla.org/fr/docs/Web/API/URLSearchParams

Example:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

// Build result
url.toString();

Solution 4

Make full use of the location DOM API, and count in hash:

location.protocol + '//' + location.hostname + location.pathname + 
    (location.search ? location.search + '&a=b' : '?a=b') +
    location.hash;

Solution 5

I found the previous answers lacking and as such here is a method that better handles other parameters in current querystring

appendToQueryString = function (param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        parameterList[parameter[0]] = parameter[1];
    }
    parameterList[param] = val;

    var newQueryString = "?";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.origin + location.pathname + newQueryString;
}

You have to use location.href = appendToQueryString(ts, true) to actually reload the page.

View more solutions

Comments

[fabiangebert]

but what if the URL contains a hash?

[Chamika Sandamal]

@fabiangebert: location.hash will gives you the hash value. hope you can update the rest as you needed :)

[oshell]

So you split the whole query string, add one element and put it back together? Why would you do that instead of just appending the new parameter? makes no sense to me.

[Envil]

@HorstJahns to avoid params are being duplicated

[geotheory]

Creates an infinite loop

[Antony D'Andrea]

This doesn't avoid the duplicate parameter as you assume the new param has the same value as the old one. But can work if you add a regex for the old one, such as rparam = separator + "ts=", newParam = param + $(this).val(), regex = new RegExp(param+"[^\&]*"); newUrl = url.replace(regex, "");

[Iftah]

sadly not yet supported by all browsers caniuse.com/#feat=urlsearchparams

[ambidexterous]

I believe you missed location.hostname, should be location.protocol + '//' + location.hostname + location.pathname + ...

[kingPuppy]

@iftah according to the documentation URL can be accessed on non-supporting browsers through calling window.URL......Ex.(new window.URL('url')) developer.mozilla.org/en-US/docs/Web/API/URL

[Tatarin]

keeps refreshing the page