What's the Difference Between Window.Location= and Window.Location.Replace()

What's the difference between window.location= and window.location.replace()?

window.location adds an item to your history in that you can (or should be able to) click "Back" and go back to the current page.

window.location.replace replaces the current history item so you can't go back to it.

See window.location:

assign(url): Load the document at
the provided URL.

replace(url):Replace the current
document with the one at the provided
URL. The difference from the
assign() method is that after using
replace() the current page will not
be saved in session history, meaning
the user won't be able to use the Back
button to navigate to it.

Oh and generally speaking:

window.location.href = url;

is favoured over:

window.location = url;

What is the difference between location.replace and location.href?

location.replace doesn't update the browser's history, you can't press the back button, location.href is pretty much like clicking on a link.

The Location.replace()method replaces the current resource with the
one at the provided URL. The difference from the assign() method is
that after using replace() the current page will not be saved in
session History, meaning the user won't be able to use the back button
to navigate to it.

Source : MDN

Difference between window.location.assign() and window.location.replace()

Using window.location.assign("url") will just cause a new document to load. Using window.location.replace("url") will replace the current document and replace the current History with that URL making it so you can't go back to the previous document loaded.

Reference: http://www.exforsys.com/tutorials/javascript/javascript-location-object.html

What's the differences between window.location.href and a href/a?

I think the main difference is what's happening behind the scene but on the surface they are pretty much giving the same effect.

window.location.href is only triggerable by JavaScript, or in JS context. Whereas a <a> tag defines hyperlink in HTML. It really depends on how you want to trigger this new page. You can either have a hyperlink a user can click/tap on, or you can trigger the page load by some JS functions that are triggered by certain actions.

To be more specific, a tag is common in webpages because browsers understand it and can apply CSS style to it to look nicer. As for window.location.href, there's no UI aspect for it, it simply is a line of JS code that you can trigger to either (1) get the current webpage URL or (2) set a value to it to redirect the user to some other URLs.

What's the difference between window.location and document.location?

According to the W3C, they are the same. In reality, for cross browser safety, you should use window.location rather than document.location.

See: http://www.w3.org/TR/html/browsers.html#dom-location

Understanding a Window.location working solution

Check conditions first, next execute (if needed) change:

function url_redirect(url){    
    if( window.location.href == url ){
       return false;
    }

    // if you need wait
    setTimeout(function(){
        window.location.replace(url);
    }, 300);

    // if you don't need to wait
    window.location.replace(url);

    return true;
};

I am not sure about the expectations of return - when true when false, assume that if the URL changed -> true otherwise -> false

What's the difference between window.open(url) and window.location.href = url on Firefox?

The difference between window.open() and window.location.href is that open() is a method of the window class, and window.location is a property of the window class.

1.window.open() is a method on the window class

Calling the window.open() method actually creates a window object, which can be held in a variable and manipulated according to your program's requirements.

To demonstrate that window.open() actually returns a window object, consider the following code:

var mywindow = window.open("http://google.com");
mywindow.name = "Awesome Window";
console.log(typeof(mywindow)); // --> "object"
console.log(mywindow.name); // --> "Awesome Window"

The reason your code was opening an unwanted window, is because you were calling window.open(), whose sole purpose in life is to open a new window.

2. window.location is a read-only property on the window class.

Although window.location is a read-only property, the window.location has a built-in shortcut feature that allows window.location to be assignable, which has the same effect as calling window.location.assign(), which does not return a window object, but uses the root window object to assign a new url to, causing the newly-assigned url to be loaded in the browser window where the javascript assigning the location was called.

If you are creating a bookmarket script, then using window.location is the better way of grabbing the current window's url and assigning it to your program's url string.

The reason why you might find that you are getting unexpected behavior in different browsers, is that there is no official public standard set for the window object, so how each browser chooses to implement it behind the scenes may vary.

---

Related Topics