JavaScript’s window.location

Written by David Walsh on May 28, 2009 · 18 Comments

Need current browser location information?  Keep in mind that the JavaScript's window.location object gives you all of that information about the window's current location.

Javascript Window Properties for:
http://davidwalsh.name:80/article.php?s=david+walsh+blog#myAnchor

window.location = {
	hash: '#myAnchor',
	host: 'davidwalsh.name',
	hostname: 'davidwalsh.name',
	href: 'http://davidwalsh.name:80/article.php?s=david+walsh+blog#myAnchor',
	pathname: '/article.php',
	port: '80',
	protocol: 'http:',
	search: '?s=david+walsh+blog',
	replace: 'function replace() { [native code] }',
	assign: 'function assign() { [native code] }',
	reload: 'function reload() { [native code] }'
}

Javascript Redirect

How can this be used? One example is doing a JavaScript redirect:

window.location = 'http://davidwalsh.name'; //redirects to homepage

Or you could use it to compare link hrefs to find out if a link is external or internal. Or you could build a sweet history manager!

Comments

  1. Well, you have to remember that there are two different locations. The location that the document was loaded from (window.location), and the location that relative paths to new documents are suppose to be loaded from (the base location). Usually they’re the same.

    Let’s say that your site is running through a proxy host because of security, performance or some other reason. In that case the proxy may insert a tag (or header) to refer the relative links in the document to the original host.

    In that case it may be preferable to have the plugins use the base location for reference. Unfortunately the tag may contain a relative URI. So we have to parse it compared to the window.location. Fortunately the URI class in MooTools-More does this for you. new URI() defaults to the base location.

  2. Bonus: window.location.replace(“myurl.com”) replaces the current page in history with “myurl.com”. That way, the back button does not go back to a page to be redirected again.

  3. @Sebastian Markbåge: As always, I enjoy your take!

    @Eric Wendelin: Thank you for the bonus round! :)

  4. The window object has so many attrs that i’ve never used.
    Great article.

  5. It seems so simple, but I can’t get an onClick to take me to a new page while it sets a cookie.

    var newMeal = document.getElementsByName(‘groceries’);
    var expires = new Date();
    expires.setTime (expires.getTime() + 24 * 60 * 60 * 1000);
    var expiryDate = expires.toGMTString();

    function newCookie(add,newMeal) {
    document.cookie = add + “=” + newMeal + “; expires=” + expiryDate;
    }

    function toShoppingList() {
    window.location = “http://www.whatsfordinner.net/Testing-Insert-div.html”
    }

    This is a meal page.

    Shopping list for a new meal

  6. David,

    Please disregard my previous message. The problem must be with the cookie because when I took that out, my redirect worked perfectly. I’m attempting to move information from one page to another page and am not sure how to best accomplish this. Well, back to the drawing board!

    If you have a minute to look at the two pages (one for sending and one for receiving), I would value any suggestions you can offer.

    http://www.whatsfordinner.net/Testing-Insert-div.html

    http://www.whatsfordinner.net/Testing-toShoppingList.html

    Thanks,

    Jean

  7. If you would like more examples of this and a live example view http://tundrablue.com/development/JavaScript/WindowLocation.html

  8. Jenny Lu June 10, 2010

    hello,

    I was wondering if you can use javascript to automatically scroll to a certain part of the page.

    forexample, if i just type in http://www.blahblah.com and it will automatically scroll to a certain part of the page.

  9. Thanks for sharing David. We use that technique to allow people to move between web & mobile sites without automatically redirecting them back to the mobile site all the time.

  10. I have a frustratng problem. The asp code I am working on no longer recognises replace as a valid method under widow.location. That is , when window.location.replace appears then no green or red lines appear and nothing shows up on the errors page.

    However, when I try running the code the application now acst as though the line was not there. The page that it tries to access does exist.

    A key issue is that window.location will no longer recognise replace as a valid method under location – when I try to type in something after the location. bit it does not show up on the list that appears. I can type in something like rhubarb with no differemce, a red or green line still does not appear.

    The script definition that it appears under is . The type bit used to be missing, but taking it out now doesnot make a difference,

    Any hints?

  11. Further to this –

    I’m not sure why I’m missing that bit of code in my final paragraph. it’s a script tag with the langage and type correctly dfined.

    Also, I forgot to say, other cited methods such as reload are also missing from the location object. I now seem to have an loaction object lacking in some critical methods, and the cause is unclear. Internet research indicates that they should be there.

  12. Further to this still, none of the methods (assign, reload , replace) appear.

    Nor do any of the standard properties (href, host, hostname, port, protocol, search, hash)

    What I am getting on the list I mentioned before are such curious things as boolean, alert, ActiveXObject, catch , Date & else. None of these seem to apply to location and URLs (which is what location is concerned with) at all. It only seems to look for items on the asp form to use as methods or properties, instead of what it’s supposed to be looking for.

    Maybe I have a bad target schema issue. I’m currently runnng on IE7. What would a right one be.

  13. Further to this still – sorry I keep making new discoveries – whenever I choose window, then press dot I get a list of standard Window properties and methods, including location, plus extras such as boolean and Date. So Window.location is not a problem.

    The problem settles in when I try to access any location properties or methods. None , including the overlooked pathname property from above, appear.

    Instead I get the window object’s properties, methods, extras etc appearing again. I could thus use the builder to type window.location.location.location etc etc without Visual Studio complaining at all.

    It may be a doctype or a target schema issue. But what is a more precise cause and how can it be fixed?

  14. It’s OK, it was a target schema issue. Once I’d used the HTML 4.01 target schema and not the default HTML 1.1 target schema, my worries went away. That’s all it took , apparently.

    The problem with the location properties as described above were still there, but were apparently one big red herring.

    I’m not satisfied that I fully understand all this, but the lesson here seems to be, if something like window.location.replace is not working, try another target schema in Visual Studio.

  15. Zaib fridi December 30, 2011

    here i have some kind of tricky Question !!

    I have a task in my project i want to implemnt it,
    here is a question….
    i have 2 php pages…
    one contain an image..
    i want when i click the image … then open a second one page…..on my desired location of page …. i wrote this code !! but it dosent work ….
    this is my second page…

    Untitled Document

    function jumppage(){

    }

    ——————————————————————————————————————

    this is my first page where i want to show my desired location…..” professional ”

    ————————————————————————————————————

    Untitled Document

    window.location.hash =”professional”;

     
     
     

     
     
     

     
     
     

    professional

  16. [...] In der modernen Webprogrammierung wird das window.location Objekt ständig gebraucht, zum Beispiel um Variablen mittels window.location.hash auf Folgeseiten auszulesen (In Kürze gibt es hier ein Tutorial dazu). Mit dem window.location Objekt kann man natürlich noch viel mehr machen, denn es enthält die komplette URI einer Internetseite. Einzelne Elemente der URI lassen sich über die verschiedenen Eigenschaften des Objekts anzsprechen, eine schöne Zusammenfassung dazu gibt’s auf David Walsh’s Blog. [...]

  17. Wil Moore III August 12, 2013

    Real world scenario:

    You are writing an HTML5 application which is running on an embedded platform (television, set top box, etc); the application listens for server events and at some point, receives a notification that it should load a newer version of itself.

    I’ve found that window.location.replace is what you want in this particular case. It would be bad form to upgrade a client just to allow them to navigate back to the previous version by clicking the back button :)

  18. […] JavaScript’s window.location […]

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Introducing MooTools ScrollSpy
Newer
Poll: Browser-Specific CSS Styles