0

Is there any simple way to do this? All big sites(Facebook, Google, Instagram) use this method.

So what exactly I'm looking for? I need to push string "/example" to my url, and after doing that, the browser window shouldnt be reloaded or redirected. I just want to get some value from url and let my JS code working. I tried with this code rigth bellow.

location.href="example";//result: localhost/example

But, the problem is that my browser starts forcing some connection, it tries non-stop to connect to my localhost, something like no-end while loop, and there is no any reload or redirect, my page stays.

Is it possible to do something like this in simple way OR its something big for me at this moment? I checked more examples and questions but i haven't found the answer.

sorry for my english i hope you understand my question

  • 2
    look on MDN for the `window.history.pushState` function, but also be aware that older browsers don't support it – Alnitak Nov 29 '16 at 09:45
  • Not usre I understood your question but `location.href = location.href + "/example";` shoud do it right? – Tchopane Nov 29 '16 at 09:46
  • Possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – WirelessKiwi Nov 29 '16 at 09:48
  • @Tchopane no its not working –  Nov 29 '16 at 09:50

2 Answers2

0

You are looking for the History API.

Try something like history.replaceState( {} , 'Example-Title', location.href+'/example' );

secelite
  • 1,353
  • 1
  • 11
  • 19
0

Yes, you can manipulate the url and history. Not sure exactly what do you need to accomplish, but this can give you an idea.

This is usually the way that front-end frameworks handle urls and routing.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

The pushState() method

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more spaaaaaace than this, you're encouraged to use sessionStorage and/or localStorage.

title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.

URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

Find more details in the documentation page:

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Community
  • 1
  • 1
Dvid Silva
  • 1,110
  • 13
  • 25
  • 1
    for example when i click some html element i would use your function and i'll push some value to my url, and after in my javascript code i want to get this value from url. thats what im looking for. and your answer definitely works! thanks now im going to learn something more about that! thanks –  Nov 29 '16 at 09:58