Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input button target="_blank" isn't causing the link to load in a new window/tab

Tags:

I have an HTML file with an input button. This is only an example button, but it's including all necessary info of code:

<input type="button" onClick="parent.location='http://www.facebook.com/'" value="facebook" target="_blank">

For some reason, it's not loading in a new window/tab.

like image 683
Teemu Laine Avatar asked Jun 20 '13 07:06

Teemu Laine


People also ask

How do I make a button redirect in a new tab?

Add an HTML element to your Page Block: Write your own HTML link / button. It is this attribute (target="_blank") that causes the link to open in a new tab. Everything in the style attribute (style="...") is CSS.

Can you add target _blank to URL?

Conclusion. You can use the target="_blank" attribute if you want your users to click on a link that opens up a new browser tab. The target="_blank" attribute is used inside the opening anchor tag like this.

What should target _blank do when included in a link tag?

A target attribute with the value of “_blank” opens the linked document in a new window or tab. A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).

What is the purpose of setting the target of a link to _blank?

target="_blank" is a special keyword that will open links in a new tab every time. target="blank" will open the first-clicked link in a new tab, but any future links that share target="blank" will open in that same newly-opened tab.


2 Answers

use formtarget="_blank" its working for me

<input type="button" onClick="parent.location='http://www.facebook.com/'" value="facebook" formtarget="_blank">

Browser compatibility: from caniuse.com
IE: 10+ | Edge: 12+ | Firefox: 4+ | Chrome: 15+ | Safari/iOS: 5.1+ | Android: 4+

like image 161
mans Avatar answered Sep 30 '22 00:09

mans


you will need to do it like this...

<a type="button" href="http://www.facebook.com/" value="facebook" target="_blank" class="button"></a>

and add the basic css if you want it to look like a btn.. like this

    .button {
    width:100px;
    height:50px;
    -moz-box-shadow:inset 0 1px 0 0 #fff;
    -webkit-box-shadow:inset 0 1px 0 0 #fff;
    box-shadow:inset 0 1px 0 0 #fff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#fff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777;
    font-family:Helvetica;
    font-size:15px;
    font-weight:700;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0 #fff
}



  .button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1
}
.button:active {
    position:relative;
    top:1px
}

target works only with href tags..

like image 28
Jorge Y. C. Rodriguez Avatar answered Sep 30 '22 02:09

Jorge Y. C. Rodriguez