¿Abrir una nueva pestaña en segundo plano?

Question 1

Usando javascript, quiero abrir una nueva página en una pestaña diferente, pero permanecer enfocado en la pestaña actual. Sé que puedo hacerlo así:

open('http://example.com/');
focus();

Sin embargo, cuando hago esto en Chrome, parpadea la nueva pestaña por un momento antes de volver a la pestaña actual. Quiero evitar esto.

La aplicación es un bookmarklet personal, por lo que solo tiene que funcionar en la última versión de Chrome.

Question 2

ACTUALIZACIÓN: En la versión 41 de Google Chrome, initMouseEvent parecía haber un cambio de comportamiento.

esto se puede hacer simulando ctrl+ click(o cualquier otra combinación de clave / evento que abra una pestaña de fondo) en un aelemento generado dinámicamente con su hrefatributo establecido en el deseadourl

En acción: violín

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = "http://www.google.com/";
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

probado solo en cromo

Question 3

¡THX por esta pregunta! Me funciona bien en todos los navegadores populares:

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = window.location.pathname;
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(!is_chrome)
{
    var url = window.location.pathname;
    var win = window.open(url, '_blank');
} else {
    openNewBackgroundTab();
}

Question 4

Por lo que recuerdo, esto está controlado por la configuración del navegador. En otras palabras: el usuario puede elegir si desea abrir una nueva pestaña en segundo plano o en primer plano. También pueden elegir si la nueva ventana emergente debe abrirse en una nueva pestaña o simplemente ... ventana emergente.

Por ejemplo, en las preferencias de Firefox:

Ejemplo de configuración de Firefox

Note la última opción.

Question 5

Hice exactamente lo que buscabas de una manera muy sencilla. Es perfectamente fluido en Google Chrome y Opera, y casi perfecto en Firefox y Safari. No probado en IE.

function newTab(url)
{
    var tab=window.open("");
    tab.document.write("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>");
    tab.document.close();
    window.location.href=url;
}

Violín: http://jsfiddle.net/tFCnA/show/

Explicaciones:
Digamos que hay ventanas A1 y B1 y sitios web A2 y B2.
En lugar de abrir B2 en B1 y luego volver a A1, abro B2 en A1 y vuelvo a abrir A2 en B1.
(Otra cosa que hace que funcione es que no hago que el usuario vuelva a descargar A2, ver línea 4)

^{Lo único que quizás no le guste es que la nueva pestaña se abre antes que la página principal.}

Question 6

Aquí hay un ejemplo completo para navegar por una URL válida en una nueva pestaña con.

HTML:

<div class="panel">
  <p>
    Enter Url: 
    <input type="text" id="txturl" name="txturl" size="30" class="weburl" />
    &nbsp;&nbsp;    
    <input type="button" id="btnopen"  value="Open Url in New Tab" onclick="openURL();"/>
  </p>
</div>

CSS:

.panel{
  font-size:14px;
}
.panel input{
  border:1px solid #333;
}

JAVASCRIPT:

function isValidURL(url) {
    var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if (RegExp.test(url)) {
        return true;
    } else {
        return false;
    }
}

function openURL() {
    var url = document.getElementById("txturl").value.trim();
    if (isValidURL(url)) {
        var myWindow = window.open(url, '_blank');
        myWindow.focus();
        document.getElementById("txturl").value = '';
    } else {
        alert("Please enter valid URL..!");
        return false;
    }
}

También he creado un contenedor con la solución en http://codebins.com/codes/home/4ldqpbw

Answer 1

79

Usando javascript, quiero abrir una nueva página en una pestaña diferente, pero permanecer enfocado en la pestaña actual. Sé que puedo hacerlo así:

open('http://example.com/');
focus();

Sin embargo, cuando hago esto en Chrome, parpadea la nueva pestaña por un momento antes de volver a la pestaña actual. Quiero evitar esto.

La aplicación es un bookmarklet personal, por lo que solo tiene que funcionar en la última versión de Chrome.

javascript google-chrome st-boost
fuente

w3schools.com/js/js_ex_browser.asp pruebe cualquiera de estos

Code Spy

1

@ jolly.exe Gracias, pero ninguno de ellos evita mostrar momentáneamente la nueva página en Chrome.

st-boost

3

Parece un duplicado de esta pregunta stackoverflow.com/questions/6897430/… La solución es usar la API de extensión de Chrome.

Willem Joosten

@WillemJoosten gracias por la primera respuesta que realmente ha logrado el objetivo. Pero, ¿hay alguna forma de hacer esto fuera de una extensión? El beneficio es tan pequeño que sería superado por el tiempo que lleva instalar la extensión.

st-boost

Posible duplicado de Impedir que la

ventana abierta se

Answer 2

w3schools.com/js/js_ex_browser.asp pruebe cualquiera de estos

Code Spy

Answer 3

1

@ jolly.exe Gracias, pero ninguno de ellos evita mostrar momentáneamente la nueva página en Chrome.

st-boost

Answer 4

3

Parece un duplicado de esta pregunta stackoverflow.com/questions/6897430/… La solución es usar la API de extensión de Chrome.

Willem Joosten

Answer 5

@WillemJoosten gracias por la primera respuesta que realmente ha logrado el objetivo. Pero, ¿hay alguna forma de hacer esto fuera de una extensión? El beneficio es tan pequeño que sería superado por el tiempo que lleva instalar la extensión.

st-boost

Answer 6

Posible duplicado de Impedir que la

ventana abierta se

Answer 7

102

ACTUALIZACIÓN: En la versión 41 de Google Chrome, initMouseEvent parecía haber un cambio de comportamiento.

esto se puede hacer simulando ctrl+ click(o cualquier otra combinación de clave / evento que abra una pestaña de fondo) en un aelemento generado dinámicamente con su hrefatributo establecido en el deseadourl

En acción: violín

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = "http://www.google.com/";
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

probado solo en cromo

Amro
fuente

8

Impresionante, creo que lo conseguimos. Sin embargo, una nota importante: en OSX es el valor de metaKey que debe ser cierto.

st-boost

4

Otra nota: esto no funcionará con URL que tengan texto de anclaje a menos que lo establezca a.target='_blank';.

st-boost

1

Esto es de gran ayuda. Eres increíble: D

iAnuj

25

Esto parece haber dejado de funcionar con la versión 41.0.2224.0 del desarrollador de Google Chrome, lanzada el 20-11-2014 (probado en Linux). No es de extrañar, ya que supongo que fue una "funcionalidad no deseada" para empezar, pero es molesto ya que tuve un gran uso de ella en aplicaciones locales. Los canales estable y beta de Chrome no deberían verse afectados por el momento, pero probablemente fusionarán los cambios pronto.

Daniel Andersson

5

@ maggot092 usando MouseEvent('click', {view: window, ctrlKey: true, metaKey: true});, la pestaña recién abierta todavía roba el foco. ¿Me estoy perdiendo de algo?

Stepan Parunashvili

Answer 8

8

Impresionante, creo que lo conseguimos. Sin embargo, una nota importante: en OSX es el valor de metaKey que debe ser cierto.

st-boost

Answer 9

4

Otra nota: esto no funcionará con URL que tengan texto de anclaje a menos que lo establezca a.target='_blank';.

st-boost

Answer 10

1

Esto es de gran ayuda. Eres increíble: D

iAnuj

Answer 11

25

Esto parece haber dejado de funcionar con la versión 41.0.2224.0 del desarrollador de Google Chrome, lanzada el 20-11-2014 (probado en Linux). No es de extrañar, ya que supongo que fue una "funcionalidad no deseada" para empezar, pero es molesto ya que tuve un gran uso de ella en aplicaciones locales. Los canales estable y beta de Chrome no deberían verse afectados por el momento, pero probablemente fusionarán los cambios pronto.

Daniel Andersson

Answer 12

5

@ maggot092 usando MouseEvent('click', {view: window, ctrlKey: true, metaKey: true});, la pestaña recién abierta todavía roba el foco. ¿Me estoy perdiendo de algo?

Stepan Parunashvili

Answer 13

¡THX por esta pregunta! Me funciona bien en todos los navegadores populares:

function openNewBackgroundTab(){
    var a = document.createElement("a");
    a.href = window.location.pathname;
    var evt = document.createEvent("MouseEvents");
    //the tenth parameter of initMouseEvent sets ctrl key
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                                true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(!is_chrome)
{
    var url = window.location.pathname;
    var win = window.open(url, '_blank');
} else {
    openNewBackgroundTab();
}

Answer 14

3

De MDN "Obsoleto Esta función se eliminó de los estándares web. Aunque algunos navegadores aún la admitan, está en proceso de descartarse. No la use en proyectos nuevos o antiguos. Las páginas o aplicaciones web que la usen pueden fallar en en cualquier momento."

BaSsGaz

Answer 15

1

Por lo que recuerdo, esto está controlado por la configuración del navegador. En otras palabras: el usuario puede elegir si desea abrir una nueva pestaña en segundo plano o en primer plano. También pueden elegir si la nueva ventana emergente debe abrirse en una nueva pestaña o simplemente ... ventana emergente.

Por ejemplo, en las preferencias de Firefox:

Ejemplo de configuración de Firefox

Note la última opción.

demee
fuente

3

Gracias, pero espero algo que pueda controlar desde un sitio web, ya que no quiero que esto afecte a otros sitios web. (también, ctrl / cmd + clic hace lo mismo - lo uso todo el tiempo)

st-boost

1

esto no es para javascript, solo para la configuración del navegador.

Lin

Answer 16

3

Gracias, pero espero algo que pueda controlar desde un sitio web, ya que no quiero que esto afecte a otros sitios web. (también, ctrl / cmd + clic hace lo mismo - lo uso todo el tiempo)

st-boost

Answer 17

1

esto no es para javascript, solo para la configuración del navegador.

Lin

Answer 18

0

Hice exactamente lo que buscabas de una manera muy sencilla. Es perfectamente fluido en Google Chrome y Opera, y casi perfecto en Firefox y Safari. No probado en IE.

function newTab(url)
{
    var tab=window.open("");
    tab.document.write("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>");
    tab.document.close();
    window.location.href=url;
}

Violín: http://jsfiddle.net/tFCnA/show/

Explicaciones:
Digamos que hay ventanas A1 y B1 y sitios web A2 y B2.
En lugar de abrir B2 en B1 y luego volver a A1, abro B2 en A1 y vuelvo a abrir A2 en B1.
(Otra cosa que hace que funcione es que no hago que el usuario vuelva a descargar A2, ver línea 4)

^{Lo único que quizás no le guste es que la nueva pestaña se abre antes que la página principal.}

Mageek
fuente

1

Gracias, es un enfoque inteligente. Sin embargo, tiene una serie de problemas, que incluyen golpear a los oyentes de eventos, desalinear el historial del navegador, cambiar potencialmente el tipo de documento y descartar atributos en el elemento html, sin mencionar el hecho de que en realidad no "abre una nueva página en una página diferente. lengüeta".

st-boost

¿Por qué no abre una página nueva en una pestaña diferente?

Mageek

4

Bueno, técnicamente abre la nueva página en la misma pestaña y la misma página en una nueva pestaña. Sé que eso es solo gramática que no importa; lo que importa es que esto disocia la página de su historial (rompe el botón de retroceso) y hace que sea mucho más difícil para Chrome, etc., realizar un seguimiento de la jerarquía de pestañas.

st-boost

Answer 19

1

Gracias, es un enfoque inteligente. Sin embargo, tiene una serie de problemas, que incluyen golpear a los oyentes de eventos, desalinear el historial del navegador, cambiar potencialmente el tipo de documento y descartar atributos en el elemento html, sin mencionar el hecho de que en realidad no "abre una nueva página en una página diferente. lengüeta".

st-boost

Answer 20

¿Por qué no abre una página nueva en una pestaña diferente?

Mageek

Answer 21

4

Bueno, técnicamente abre la nueva página en la misma pestaña y la misma página en una nueva pestaña. Sé que eso es solo gramática que no importa; lo que importa es que esto disocia la página de su historial (rompe el botón de retroceso) y hace que sea mucho más difícil para Chrome, etc., realizar un seguimiento de la jerarquía de pestañas.

st-boost

Answer 22

Aquí hay un ejemplo completo para navegar por una URL válida en una nueva pestaña con.

HTML:

<div class="panel">
  <p>
    Enter Url: 
    <input type="text" id="txturl" name="txturl" size="30" class="weburl" />
    &nbsp;&nbsp;    
    <input type="button" id="btnopen"  value="Open Url in New Tab" onclick="openURL();"/>
  </p>
</div>

CSS:

.panel{
  font-size:14px;
}
.panel input{
  border:1px solid #333;
}

JAVASCRIPT:

function isValidURL(url) {
    var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if (RegExp.test(url)) {
        return true;
    } else {
        return false;
    }
}

function openURL() {
    var url = document.getElementById("txturl").value.trim();
    if (isValidURL(url)) {
        var myWindow = window.open(url, '_blank');
        myWindow.focus();
        document.getElementById("txturl").value = '';
    } else {
        alert("Please enter valid URL..!");
        return false;
    }
}

También he creado un contenedor con la solución en http://codebins.com/codes/home/4ldqpbw

Answer 23

2

Gracias, pero creo que ha entendido mal mi pregunta. Quiero que la página de apertura sea la que se enfoca al final, no la nueva pestaña, y la pregunta es cómo puedo evitar mostrar la nueva pestaña por un momento.

st-boost

Answer 24

A partir de hoy y el último Chrome, esto no parece hacer nada en absoluto.

Mr Printer

¿Abrir una nueva pestaña en segundo plano?

Respuestas: