Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 2

Kyle Wagner
Kyle Wagner
5,609 Points
Posted by Kyle Wagner
Kyle Wagner
5,609 Points

window.location vs window.location.href

The code Andrew Chalkley presents for linking to another page using a select with multiple option's and a button is as follows:

$("#menu a").each(function(){
  var $option = $("<option></option>");
  var $anchor = $(this);

  $option.val($anchor.attr("href"));
  $option.text($anchor.text());
  $select.append($option);

})

var $button = $("<button>Go</button>");
$("#menu").append($button);

$button.click(function(){
  window.location = $select.val();
});

The "window.location" threw me. The jQuery documentation was no help. I think this is javascript (not jQuery exclusive). W3 Schools and other sources seem to like using "window.location.href" for the purpose of retrieving or setting the href of a page. As far as I can tell, window.location has many attributes, href being one of them: we can see this using the javascript console and typing in "window.location". How does assigning the value of $select.val(), which should be the value of the href attribute, accomplish what we want here? Why doesn't this command write over all of the window.location attributes, and instead only change the href attribute? Lastly, would it be preferable to use window.location.href?

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

window.location and window.location.href are designed to both work, wherein if the former is used the JavaScript engine assigns the URL to the latter. So while window.location is an object, if/when a URL string is passed directly then the string is set to the href attribute of the location object. This is obviously atypical of JavaScript objects, however this particular implementation has been in JavaScript for ages.

It most cases it doesn't really matter which option you choose to use. There are, however, a few instances where one is preferred over the other, such as:

  1. same-origin policy conflicts if setting a new URL in an iframe or other window that is already of a different origin from the current window (e.g an iframe has a different domain than the document it is loaded in and you want to change the URL of the iframe) would use window.location to set the new URL. This is because location.href is read-only when called from a different origin (domain).
  2. if using use strict in your JavaScript may cause an exception if using window.location since you are essentially assigning a string to an object, so here it would be best to use the full window.location.href.

See this StackOverflow for reference.