0

I have just read some concept about window.location property and method. And I know that 

1. window.location.href = "http://google.com"
2. window.location.assign("http://google.com")
3. window.location.replace("http://google.com")

are all can redirect our page to the target url, the only difference is that window.location.replace doesn't record the history, so we cannot get back to the previous page directly.

Now I just wondering, what's is the difference between window.location.href and <a href="http://google.com">Google</a>, the <a> tag also records the history. And for what situation do we use them respectively?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
CHEN HE
  • 3
  • 1
  • 2
  • `window.location.href` is performing the redirection programmatically from Javascript. The `a` tag is performing the redirection based upon the user clicking on the child element inside the `a` tag. The `a` tag is normally a static view element, but you could also, from Javascript, change the `href` attribute programmatically so that when the user clicks on the child element, they redirect to whatever location you set. – lurker May 02 '20 at 02:03
  • Thanks, lurker. Now I get more sense for this two concepts. :) – CHEN HE May 02 '20 at 02:44
  • Does this answer your question? [What's the difference between a link using href and onclick?](https://stackoverflow.com/questions/37369620/whats-the-difference-between-a-link-using-href-and-onclick) – Heretic Monkey May 08 '20 at 15:33

2 Answers2

0

The difference is in how they are likely to be used (duh, bear with me.)

Setting window.location.href is a way to programmatically set the URL. For instance, window.location.href = 'https://www.google.com' will navigate the user to Google's search page. There is no way for your user to make use of this knowledge, unless they open the developer console.

Using an anchor tag of <a href="https://www.google.com">Google</a> will show a hyperlink that the user can click, navigating them to Google's search page. This tag is also more likely to be interpreted by a screen reader more appropriately than a button with an onclick that navigates them to Google by setting window.location.href manually in Javascript.

Ezra
  • 1,118
  • 9
  • 13
0

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.

b_o
  • 91
  • 5
  • Thanks, b_o, yes, that's the good point, for window.location.href we can use some JS functions. Really helps me to get better understanding. – CHEN HE May 02 '20 at 02:35