3

how can I append variables to an URL with javascript without navigating to the url ?

thanks

aneuryzm
  • 63,052
  • 100
  • 273
  • 488
  • 1
    What do you wish to achieve by this? If you do not navigate to it, then the URL will not be the URL representing the current resource, and so is no different to just any old string. In that case, just use the normal JS string concatenation functionality – Paul Butcher Jun 07 '10 at 15:00
  • mhm you right, i would like to store that string in the url, so when I click on any other link in the page, this parameter is always there added to the original link. – aneuryzm Jun 07 '10 at 16:10

3 Answers3

6

To append variables to the hash (as Matthew suggested), you can do the following in plain JavaScript:

window.location.hash = 'varA=some_value;varB=some_value';

This will add #varA=some_value;varB=some_value to your URL. It will not refresh the page unless the hash value is equal to an anchor name or an element id within the document.

Then to check if a hash value is present, simply do the following:

var i, variables = window.location.hash.split(';');

if (variables.length > 0) {
    // Variables present in hash
    for (i = 0; i < variables.length; i++) {
       keyValuePair = variables.split('=');
       // keyValuePair[0] would be the key (variable name)
       // keyValuePair[1] would be the value
    }
}
else {
    // No variables in the hash
}

You may also want to check out the following Stack Overflow post on issues related to the URL encoding of the hash part in different browsers:

Community
  • 1
  • 1
Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
  • I'm sure there must be a `encodeURIComponent()`/`decodeURIComponent()` calls somewhere to make that work reliably. – Tomalak Jun 07 '10 at 15:34
4

You can modify window.location.hash. Anything else will cause a navigation.

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539
  • And modifying `.hash` should cause the browser to jump (navigate, if you will) to the corresponding document position (if defined). – Tomalak Jun 07 '10 at 15:01
  • @Tomalak: therefore, if the anchor is undefined, the browser will *appear* not to have navigated anywhere, right? – Piskvor left the building Jun 07 '10 at 15:12
  • @Piskvor: Yes, it won't even flicker. This is quite a tried and tested method to attach data to the URL. Many webapps do it. Gmail is an example. – Daniel Vassallo Jun 07 '10 at 15:18
  • @Daniel: Hm… I don't quite understand what the advantage would be. Can you give an example where this would be useful? – Tomalak Jun 07 '10 at 15:23
  • @Tomalak: One example: Since hashes are stored in bookmarks, this is one technique to save the location in AJAX web apps. If Gmail attached a querystring instead of a hash in the URL, it would cause a page refresh whenever you click on something... Probably Gmail is not a very good example, but in some applications it is quite useful. – Daniel Vassallo Jun 07 '10 at 15:28
  • @Daniel: Makes sense, thank you (I was not thinking about persistence, only about "live" functionality). – Tomalak Jun 07 '10 at 15:32
  • @Tomalak: I guess Gmail use it in order to allow users to refresh the page without being sent back to the default section (which is related to the bookmarking example). – Daniel Vassallo Jun 07 '10 at 15:41
0

I am not sure about that, but how is it with this?:

document.url + myVar + 'myString';

Though Javascript is not my language :P

faileN
  • 92
  • 1