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?

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;"

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");

29

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

<a id="myLink" href="www.google.com" target="_blank">google</a>

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.


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.


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>

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>

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.


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>

-1

Prueba este HTML:

<input type="button" value="Button_name" onclick="window.open('LINKADDRESS')"/>

-5

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


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


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.


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.