20

How do you make an HTML button behave just like a hyperlink where, if you click on it, it will open a browser window showing a page you want?

I understand this much. I think I will use this but instead of a link to some javascript code inside the quotes for "onclick" I want to put something simple that will launch a new browser window.

Improve this question
6
  • 1
    <a target="_blank" href="...">Why not just use a hyperlink?</a>. Commented Feb 24, 2010 at 6:47
  • 2
    Because, you can do stuff with buttons that you can't do with a hyperlink. IE: Boxy border which is easy to stylize... perhaps he wants to open a window and do more things as well, etc Commented Feb 24, 2010 at 6:51
  • What about wrapping the anchor tag around the button? Commented Feb 24, 2010 at 6:54
  • Daniel, that does work, but I dislike it because it sorta... enlarges the code by a lot, for one line. Similarly, I dislike it when people do something like <div id="amazing_div_that_is_cool" style="...something that goes on for lines and lines..."> because it becomes unreadable, whereas, using the <style> tag in the head of the document is much, much better. Basically, my rule of thumb is to keep a tag as short as possible. Of course, many [and I mean, many] people will disagree with me. Commented Feb 24, 2010 at 6:58
  • But once again, your idea is totally valid. Commented Feb 24, 2010 at 7:00

7 Answers 7

Reset to default
28

onclick and window.open

<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is valid and works, but one should consider the accessibility implication of this. Users using screen readers or other accessibility features will no longer know where the link goes, which may inform them whether or not the link takes them where they expect to go. Please, please, please use this sparingly, or avoid it altogether if you can. It might be a bit more effort to style a link, but it's much better for the end-user experience.
11 
In Head: <script> openNewWindow = function() { window.open(url, "_blank"); }; </script> In Body: <input type="button" onclick="openNewWindow()" >

I prefer to define a function named openNewWindow() instead of putting the code in the input tag. This is for organization. I highly recommend you do this if you're planning on having many different buttons for opening different windows.

Improve this answer

Comments

9

I think this is the best solution for you.

Try this out

<a href="http://www.stackoverlfow.com" target="_"><input type="button" value="Click Me"/></a>

Happy Coding!!

Improve this answer

1 Comment

That is invalid HTML and will not consistently work.
3

You could do something like this:

window.open(url, "window-name", "menubar=no,innerWidth=600,innerHeight=600,toolbar=no,location=no,screenX=400,screenY=40");

Passing a name to the open method causes the browser to open a new window. The third argument defines the looks of the new window.

Improve this answer

Comments

2 
<input type="button" value="Google" onclick="window.open('http://www.google.com', '_blank');" />
Improve this answer

Comments

1

I'm 7 years late, I realize, but I had a similar issue and thought I comment for those who may follow.

If you're using Bootstrap, you can attach Bootstrap button classnames to anchor tags and make them look just like buttons:

<a href="path/file.ext" class="btn btn-md btn-link">I Look Like A Button</a>

Bootstrap supports basic sizes as well, including btn-sm or btn-lg. Granted, not everyone uses Bootstrap but even then the default styles are free, easy to find, and can be copied into your own stylesheet even if you're using a custom boilerplate layout.

Improve this answer

1 Comment

At the end, this solution (i.e. to use just CSS styling) is the cleanest of all ones.
0

I've seen a lot of conflicting information regarding Content Security Policies. The primary recommendation from Google's developer site, web.dev is found here => https://web.dev/strict-csp/#what-is-a-strict-content-security-policy.

There are several professional level recommendations stating that a CSP should be used. I write HTML sites, right now, but intend to move to Angular and/or React. In the meantime, the recommendation is that a js script be used to get the element id and forward via the script, rather that using a link.

The justification for this is that cross scripting attackers can use the vulnerability of these elements when the "onclick," or related commands, are used. This removes the vulnerability.

I would recommend approaching it from a CSP point of view and following the linked guidelines to make your site compliant with W3 and Google recommendations.

Improve this answer

1 Comment

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.