What is the difference between window.location.href and window.open () methods in JavaScript?
-
2Related: How do I redirect to another webpagekrubo– krubo2019-10-20 09:44:30 +00:00Commented Oct 20, 2019 at 9:44
Add a comment
|
8 Answers
window.location.href is not a method, it's a property that will tell you the current URL location of the browser. Changing the value of the property will redirect the page.
window.open() is a method that you can pass a URL to that you want to open in a new window. For example:
window.location.href example:
window.location.href = 'http://www.google.com'; //Will take you to Google.
window.open() example:
window.open('http://www.google.com'); //This will open Google in a new window.
Additional Information:
window.open() can be passed additional parameters. See: window.open tutorial
4 Comments
Rory O'Kane
The standard probably does say that
window.location.href is a property, not a method, but Internet Explorer (version 10 at least) allows you to treat href as a method too. I've seen it work, only in IE10, on one page I've used. That's probably why the asker was calling href a method. See the question IE incompatability with window.location.href. But yes, it's better to use href as a property, which will work in any browser, including IE.
James Hill
@RoryO'Kane, this question was asked in 2011. I doubt the user was referring to IE 10.
Rory O'Kane
True. But I think it’s likely, though not certain, that older versions of IE treated
window.location.href the same way. After all, newer versions of iE are generally getting more standards-based, not less. So if IE10 is still breaking the standard, then older versions probably did too.
Harry
What's the difference between using
window.open(newUrl, '_self') and location.href = newUrl` ? Both will open the newUrl in the same tab.window.openwill open a new browser with the specified URL.window.location.hrefwill open the URL in the window in which the code is called.
Note also that window.open() is a function on the window object itself whereas window.location is an object that exposes a variety of other methods and properties.
Comments
There are already answers which describes about window.location.href property and window.open() method.
I will go by Objective use:
1. To redirect the page to another
Use window.location.href. Set href property to the href of another page.
2. Open link in the new or specific window.
Use window.open(). Pass parameters as per your goal.
3. Know current address of the page
Use window.location.href. Get value of window.location.href property. You can also get specific protocol, hostname, hashstring from window.location object.
See Location Object for more information.
Comments
window.open is a method; you can open new window, and can customize it. window.location.href is just a property of the current window.
Comments
window.open () will open a new window, whereas window.location.href will open the new URL in your current window.
2 Comments
user761100
window.open() can also open the 'url' in the same window if '_self' is passed as additional parameter.
Harry
yes, had the same doubt. What's the difference between using
window.open(newUrl, '_self') and location.href = newUrl` ?The window.open will open url in new browser Tab
The window.location.href will open url in current Tab (instead you can use location)
Here is example fiddle (in SO snippets window.open doesn't work)
var url = 'https://example.com';
function go1() { window.open(url) }
function go2() { window.location.href = url }
function go3() { location = url }<div>Go by:</div>
<button onclick="go1()">window.open</button>
<button onclick="go2()">window.location.href</button>
<button onclick="go3()">location</button>
answered Apr 8, 2019 at 15:41
Kamil Kiełczewski
93.7k34 gold badges401 silver badges375 bronze badges
Comments
For those using React and Router, a nice way to navigate without refreshing the entire app.
withRouter.bind("URL")
Calling window.location.href = "URL" seem to refresh the app and might be an intended decision and it works.
Comments
href is a property of the location interface. window.location.href navigates to the provided URL.
On the other hand window.open() loads a specified resource into a new or existing browsing context(that is, a tab, a window, or an iframe) under a specified name.
open()
open(url)
open(url, target)
open(url, target, windowFeatures)
These additional parameters allow you to implement some specific functionalities. Refer to this document for details window.open documentation
One interesting thing that I noticed beyond this document is that parent.opener is undefined in case of safari and IOS if you use window.open. parent.opener will work if you use location.href for redirection.
Related to issue
