hide variables passed in URL

Question

We've been working on a web application and we've just about got it finished up, but there's one thing that bothering us (although by no means is it going to stop production.)

When we call one of the pages (index.html), we sometimes have to pass it a variable in the URL (searchid). So we get a page like http://domain.com/index.html?searchid=string.

We'd ideally like to not show the ?searchid=string, but I'm not sure how we'd do that.

My group doesn't own the index.html page (but we are working with the group that does), so I don't know how much we'd be able to do with anything like .htaccess or similar.

I was thinking about POSTing the variable, but I don't know how to receive it with just HTML and jQuery. Another person in my group thought that after the page loaded we could remove it from the URL, but I assume we would need a page refresh which would then lose the data anyway.

I'm trying to avoid XY problem where the problem is X and I ask about Y, so what's the right way to remove the variable from the URL?

What I'm not understanding is the reason why you'd want to remove the query-string from the URL. Is the content of the page changing in a way that the query-string is no longer relevant? — zzzzBov, Nov 30 '12 at 17:48
`.htaccess` would allow you to prettify the url, that can be turned into something like `http://domain.com/searchfor/string`. Would that be enough? If you're looking to get rid of `string` altogether, I don't think it's possible without POSTing. And you can't read POST data from html/js, only from the server end. — bfavaretto, Nov 30 '12 at 17:51
Why does it bother you that you are making a restful application? — epascarello, Nov 30 '12 at 17:51
Possible solution: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — Deleteman, Nov 30 '12 at 17:52

score 17 · Answer 1 · answered Nov 30 '12 at 17:51

17

You can use the History API, but it does require a modern browser

history.replaceState({}, null, "/index.html");

That will cause your URL to appear as /index.html without reloading the page

More information here:

Manipulated the browser history

answered Nov 30 '12 at 17:51

lostsource

21,070
8
66
88

This is a good solution, but will be more work to implement for this change. Upvote! – Rob Nov 30 '12 at 18:23
This is by far the best answer, but you should include, perhaps, how to hide specific parameters (e.g., `http://example.com/index.html?search=cats&utm_source=app`) where you want to hide the source for analytics but you want to include the search so users can share the link or bookmark it. – Robert Moore Nov 04 '17 at 15:30
The only answer I needed. Thx a lot @lostsource. – Mo1 Mar 03 '21 at 08:18

score 4 · Accepted Answer · answered Nov 30 '12 at 18:06

Your question seems to indicate that the target page is not and will not be powered by some server-side script. If that's the case, I'd suggest changing the querystring to a hash, which has the advantage of being directly editable without triggering a page-load:

http://yourdomain.com/page.html#search=value

<script type='text/javascript'>
  // grab the raw "querystring"
  var query = document.location.hash.substring(1);

  // immediately change the hash
  document.location.hash = '';

  // parse it in some reasonable manner ... 
  var params = {};
  var parts = query.split(/&/);
  for (var i in parts) {
    var t = part[i].split(/=/);
    params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
  }

  // and do whatever you need to with the parsed params
  doSearch(params.search);
</script>

Though, it would be better to get some server-side scripting involved here.

This looks like it will be the easiest to implement, handing code off to the other group now. — Rob, Nov 30 '12 at 18:21

score 0 · Answer 3 · answered Nov 30 '12 at 17:51

0

It's possible to rewrite the URL using JavaScript's history API. History.js is a library that does this very well.

That being said, I don't think there's any need for removing the query-string from the URL, unless you're dynamically changing the contents of the page to make the current query-string irrelevant.

answered Nov 30 '12 at 17:51

zzzzBov

174,988
54
320
367

We are, and in general it's a big ugly. – Rob Nov 30 '12 at 17:58

John Dvorak · Answer 4 · 2012-11-30T17:59:57.740

0

You could post the data, then let the server include the posted data in the page, e.g.:

echo "<script> post_data = ".json_encode($_POST)." </script>";

This works cross-browser.

edited Nov 30 '12 at 17:59

answered Nov 30 '12 at 17:54

John Dvorak

26,799
13
69
83

score 0 · Answer 5 · answered Mar 02 '23 at 10:40

Use this:

function urlParameter__to__HiddenFormVariables(sURL) {
    var query = sURL.split("?").pop().split("&");
    var split, elem;
    var formName = "frmTest";
    
    for (var i=0; i < query.length; i++ ) {
        split = query[i].split("=");

        $j('<input>').attr({
            type: 'hidden',
            name: split[0],
            value: split[1].replace(/"/g, '\\"')
        }).appendTo(formName);
    }
}

or

function urlParameter__to__HiddenFormVariables(sURL) {
    var query = sURL.split("?").pop().split("&");
    var split, elem;
    var formName = "frmTest";
    
    for (var i=0; i < query.length; i++ ) {
        split = query[i].split("=");

        var input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", split[0]);
        input.setAttribute("value", split[1].replace(/"/g, '\\"'));

        var x = document.getElementById(formName);
        if(x != null){
            x.appendChild(input);
        }
    }
}

When posting a block of code, it is helpful to explain what the code is doing and how to use it. For example, "the code inserts hidden elements into a form. When submit, the data appears at the server as if had been submit through a form POST" — pilotcam, Mar 06 '23 at 11:01

hide variables passed in URL

5 Answers5

Linked