Javascript: abra una URL determinada en una nueva pestaña haciendo clic en un botón

109

Me gustaría tener un botón que redirija a una URL determinada y se abra en una nueva pestaña. ¿Cómo se puede hacer esto?

wong2
fuente

Respuestas:

143

Utilizar este:

<input type="button" value="button name" onclick="window.open('http://www.website.com/page')" />

Funcionó para mí y abrirá una nueva ventana emergente real en lugar de un nuevo navegador o pestaña completa. También puede agregarle variables para evitar que muestre características específicas del navegador de la siguiente manera:

onclick="window.open(this.href,'popUpWindow','height=400,width=600,left=10,top=10,,scrollbars=yes,menubar=no'); return false;"
Luke Alderton
fuente
2
@ wong2 Es posible que desee cambiar la respuesta a esta. El seleccionado actualmente es demasiado prolijo para ser eficiente.
CSS
54

En javascript puedes hacer:

window.open(url, "_blank");
satnam
fuente
29

Agregar target = "_ blank" debería hacerlo:

<a id="myLink" href="www.google.com" target="_blank">google</a>
Tim Büthe
fuente
3
Ya veo, lo siento, me perdí eso. Bueno, puedes diseñar el enlace para que se vea y se sienta como un botón. Si está utilizando jQuery UI, simplemente use el botón para hacerlo.
Tim Büthe
1
¡Excelente solución para la gran mayoría de nosotros que simplemente incursionamos en el diseño web! ¡Gracias!
SMBiggs
1
+1 porque les diste una buena solución a aquellos que buscan una respuesta simple de "abrir enlace en una nueva pestaña", si no están usando un botón.
user295583058
Exactamente lo que quiero. Gracias
Shahrukh Anwar
+1, si algo abre una página en una nueva pestaña, lógicamente es un enlace, por lo que la <a>etiqueta es apropiada. Deben usarse estilos para que parezca un botón.
Kos
21

Puede olvidarse de usar JavaScript porque el navegador controla si se abre o no en una nueva pestaña. Su mejor opción es hacer algo como lo siguiente en su lugar:

<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
    <input name="dynamicParam1" type="text"/>
    <input name="dynamicParam2" type="text" />
    <input type="submit" value="submit" />
</form>

Esto siempre se abrirá en una nueva pestaña independientemente del navegador que utilice un cliente debido al target="_blank"atributo.

Si todo lo que necesita es redireccionar sin parámetros dinámicos, puede usar un enlace con el target="_blank"atributo como sugiere Tim Büthe.

Tony
fuente
1
Funciona según sea necesario (probado en Chrome, Firefox, IE10) :)
Zeeshan
10

Úselo en window.openlugar de window.locationpara abrir una nueva ventana o pestaña (según la configuración del navegador).

Su violín no funciona porque no hay ningún buttonelemento para seleccionar. Prueba input[type=button]o dale al botón idy úsalo #buttonId.

James Allardice
fuente
10

Mi método preferido tiene la ventaja de no tener JavaScript incrustado en su marcado:

CSS

a {
  color: inherit;
  text-decoration: none;
}

HTML

<a href="http://example.com" target="_blank"><input type="button" value="Link-button"></a>
SpyderScript
fuente
Bueno, supongo que tengo un nuevo método preferido.
Cabestro
Creo que este responde la pregunta de manera más correcta. +1 :)
Pramesh Bajracharya
3

Abrir en una nueva pestaña usando javascript

 <button onclick="window.open('https://www.our-url.com')" id="myButton" 
 class="btn request-callback" >Explore More  </button>
Siddharth Shukla
fuente
1

Acabo de usar target = "_ blank" en la etiqueta de formulario y funcionó bien con FF y Chrome, donde se abre en una nueva etiqueta, pero con IE se abre en una nueva ventana.

Obaidul Hye
fuente
1
La apertura de una pestaña o ventana depende de las opciones del navegador del usuario. No sé sobre IE, pero en la mayoría de los navegadores la página web no puede elegir si el enlace se abre en una pestaña o en una ventana, pero el usuario puede configurarlo.
joeytwiddle
0

prueba esto

<a id="link" href="www.gmail.com" target="_blank" >gmail</a>
Amor Kumar
fuente
-1

Prueba este HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>
raj mori
fuente
-5

No puedes. Este comportamiento solo está disponible para complementos y solo el usuario puede configurarlo.

ckruse
fuente
-5
<BUTTON NAME='my_button' VALUE=sequence_no TYPE='SUBMIT' style="background-color:transparent ; border:none; color:blue;" onclick="this.form.target='_blank';return true;"><u>open new page</u></BUTTON>

Este botón se verá como una URL y se puede abrir en una nueva pestaña.

Jolene
fuente
necesita agregar "formulario"
nerkn
No es una buena idea (semánticamente hablando) tener un botón para comportarse como un enlace. En su lugar, use la aetiqueta.
Henrique Schreiner
-6

USE este código

function openBackWindow(url,popName){
        var popupWindow = window.open(url,popName,'scrollbars=1,height=650,width=1050');
          if($.browser.msie){
            popupWindow.blur();
            window.focus();
        }else{
           blurPopunder();
        }
      };

    function blurPopunder() {
            var winBlankPopup = window.open("about:blank");
            if (winBlankPopup) {
                winBlankPopup.focus();
                winBlankPopup.close()
            }
    };

Funciona bien en Mozilla, IE y Chrome y versiones inferiores a 22; pero no funciona en Opera y Safari.

Lalit Guglani
fuente
2
¡Esta no es la mejor respuesta! Sólido -1.
Shougo Makishima
1
Utilice este código no es realmente una respuesta y no tiene ninguna motivación detrás de él.
Edeph