CODEWITHSUNDEEP
javascripthtmlonclick
xarzu
xarzu

Reputation: 9479

How do you make an HTML button behave just like a hyperlink?

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.

Upvotes: 20

Views: 84240

Answers (7)

jdrake6789
jdrake6789

Reputation: 21

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.

Upvotes: 0

RalphTheWonderLlama
RalphTheWonderLlama

Reputation: 143

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.

Upvotes: 1

Ravi Vanapalli
Ravi Vanapalli

Reputation: 9942

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!!

Upvotes: 9

YOU
YOU

Reputation: 123881

onclick and window.open

<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />

Upvotes: 28

Warty
Warty

Reputation: 7395

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.

Upvotes: 11

Josh Stodola
Josh Stodola

Reputation: 82513

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

Upvotes: 2

Kees de Kooter
Kees de Kooter

Reputation: 7195

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.

Upvotes: 3

Related Questions