50

I'm currently setting the window.location.pathname property to redirect the user to a relative URL. The new URL has parameters, so the line of JavaScript looks like this:

window.location.pathname = window.location.pathname.substring( 0, window.location.pathname.lastIndexOf( '/' ) + 1 ) + 'myPage.xhtml?u=' + selected_user.Username;

This is successful in Firefox, however Chrome encodes the question mark with '%3F' and the request subsequently fails.

I'm not sure if I'm using window.location properly. Do I need to use properties of window.location such as pathname or href? I've found that as soon as I set one property the location is reloaded, so for example, the search and pathname properties can't be set separately. Can window.location be set directly? I only need to set a relative URL with a parameter.

Improve this question

4 Answers 4

Reset to default
68

pathname and many other properties of location and links reflect only part of the URL:

http:  //www.example.com/path/to/example.html?param1=2&param3=4#fragment
^protocol^hostname      ^pathname            ^search           ^hash

As you can see, the ?... part of the URL is not part of the pathname; it makes no sense to write a value containing ? to location.pathname, as that part of a URL cannot contain a question mark. Chrome is correcting your mistake by encoding the character to a sequence that means a literal question mark, which doesn't terminate pathname.

These properties are great for breaking a URL into their constituent parts for you to process, but you probably don't want to write to them in this case. Instead, write to location.href. This represents the whole URL, but it's perfectly fine to write a relative URL to it; this will be worked out relative to the current value, so there is in fact no need to read and split the pathname at all:

location.href= 'myPage.xhtml?u='+encodeURIComponent(selected_user.Username);

Note the URL-encoding. If a username can contain characters other than alphanumerics you will probably need this to stop those characters breaking the parameter. Always URL-encode arbitrary strings before putting them into part of a URL.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the detailed explanation. I've changed my code to use the href property and also to call encodeURIComponent().
Please note that for most cases, you want to use location.host instead of location.hostname. In short, this is because your code at some point may run in a server on a port other than 80.
Note that in (rare) case when the source is an iframe, then it needs to do window.parent.location.....
16

Try setting the location.href property instead of window.location.pathname.

Improve this answer

2 Comments

just window.location = ... is enough
Assigning a value to window.location causes an error in TypeScript. I guess assigning to window.location.href is the better option.
9

Using window.location.href is considered the safest way to set a URL. I think this should fix the encoding problem.

window.location.href = window.location.pathname.substring( 0, window.location.pathname.lastIndexOf( '/' ) + 1 ) + 'myPage.xhtml?u=' + selected_user.Username;

If that doesn't help, please show an example URL.

Improve this answer

Comments

0

In your case you can set the location.search property without having to know/reset/decode the entire URL.

location.search = 'u=' + selected_user

Or if you have a lot of parameters with lots of different kinds of characters

location.search = 
    new URLSearchParams({
       u: selected_user,
       otherThing: "hi this %#%##^ is a "+
          "Very •}€○♡●¡● complex string"

    });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.