0

I want to stick a hash in URL between the main domain and /the/rest/of/url.

Apparently, I'm not doing it right.

I used:

 window.location.hash = location.pathname;

Hoping to replace http://www.mybusinesssite.com/path/to/mypage with http://www.mybusinesssite.com/#/path/to/mypage

Instead, I get http://www.mybusinessite.com/path/to/mypage/#/path/to/my/page

What's the proper way to make it http://www.mybusinesssite.com/#/path/to/mypage ?

Dimitri Vorontzov
  • 7,834
  • 12
  • 48
  • 76
  • 1
    As a thought exercise, why would you expect setting the hash to change the path itself? – Evan Davis Jun 03 '13 at 17:04
  • Deleted my poor answer. Look here for a better solution: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri – Lee Meador Jun 03 '13 at 17:14
  • Oh, this is great, @Lee! May I please ask you to write another answer and show me how to apply that to my situation? – Dimitri Vorontzov Jun 03 '13 at 17:19

3 Answers3

3

Try

window.location = location.protocol + '//' + location.host + '/#' + location.pathname

if you want to change the displayed url you can use push states, e.g.

history.pushState({}, "page x",  location.protocol + '//' + location.host + '/#' + location.pathname);

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

Musa
  • 96,336
  • 17
  • 118
  • 137
  • I like this - but can this be done without reloading the page, @Musa? – Dimitri Vorontzov Jun 03 '13 at 17:11
  • Isn't location.origin depreciated? You can also check out this post: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – Stephen Jun 03 '13 at 17:14
  • This looks fantastic, @Musa - finally someone explained to pushState works, thank you for that! – but it doesn't work in older browsers, does it? – Dimitri Vorontzov Jun 03 '13 at 17:15
  • Adds /undefined/ to URL in IE10, @Musa – Dimitri Vorontzov Jun 03 '13 at 17:21
  • @Figaro looks like IE doesn't support location.origin see update. – Musa Jun 03 '13 at 17:30
  • Works excellent in modern browsers now, @Musa. Thank you. What would you recommend for older browsers support? – Dimitri Vorontzov Jun 03 '13 at 17:42
  • @Figaro you'll have to process all the requests at `http://www.mybusinesssite.com/` read the hash value and display that page. Since hashes aren't available to the server this will have to be done on the client via ajax. – Musa Jun 03 '13 at 17:51
  • That's what I'm doing already. @Musa. ;-) But what I'm asking is, if the AJAX page of my site does NOT have the hash in the URL, the excellent solution that you provided would not work in older browsers, and the hash will not be inserted? Right? – Dimitri Vorontzov Jun 03 '13 at 17:56
  • @Figaro it doesn't look so to me, if you page is loaded at `http://www.mybusinesssite.com/` then why is the url `http://www.mybusinesssite.com/path/to/mypage`? – Musa Jun 03 '13 at 18:00
  • May I ask you to take a look at the actual site I'm working on, @Musa. if you could spare a few more minutes? – Dimitri Vorontzov Jun 03 '13 at 18:05
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31139/discussion-between-musa-and-figaro) – Musa Jun 03 '13 at 18:06
1

See this FIDDLE

The code looks like this:

var a = document.createElement('a');
a.href = location.href;
var path = a.pathname;
a.pathname = "";
a.hash = path;
var resultUrl = a.href;

Works in my current versions of IE, FireFox and Chrome. (IE is IE 10 in compatability mode so it thinks it's 8, sort of.)

Lee Meador
  • 12,829
  • 2
  • 36
  • 42
  • I put it through a series of alerts, and it all works fine, except for some reason it does not actually update the url in the address bar on my end, @Lee. It does seem like a step toward what I am looking for, though - could there be an error near the last line? – Dimitri Vorontzov Jun 03 '13 at 17:38
  • I retested it again, it does output url with the hash inside a document, but how do I get it to update URL in the address bar, @Lee? – Dimitri Vorontzov Jun 03 '13 at 17:46
  • If you say `location.href = a.href` it will move to that page and update what shows in the address bar. Your comment about not wanting to reload the page is gone now. But the address bar is tied to the actual page location so changing it will move the page. @Musa has an HTML5 solution that will change what shows on the address bar using `pushState` but it does change what happens if they click and then do the back button, too. – Lee Meador Jun 03 '13 at 18:08
  • Nah, @Lee, I still must not update the page. Do you think Musa's solution is the only one that would update the url in the address bar without reloading the page? If yes, could you recommend a solution that would accomplish the same for older browsers? – Dimitri Vorontzov Jun 03 '13 at 18:12
  • 1
    I don't know of one. Remember the idea of the address bar is to show the user where they are. Having the javascript fool with it could be problematic to users. The `pushState` stuff is useful since computers are fast enough now that running code in the browser is a viable way to create web apps and being able to use the back button to go to a previous state of javascript generated screen content is what it's for. – Lee Meador Jun 03 '13 at 18:31
0

This works for me:

URL = window.location.protocol + '//' + window.location.host + '/#' + window.location.pathname;
Stephen
  • 576
  • 8
  • 19