开发者

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 开发者_如何学JAVAsome javascript code inside the quotes for "onclick" I want to put something simple that will launch a new browser window.


onclick and window.open

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


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.


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


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.


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


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜