pagina - Abra una URL en una nueva pestaña(y no una nueva ventana) usando JavaScript
javascript abrir nueva ventana (27)
window.open no puede abrir ventanas emergentes de forma confiable en una nueva pestaña en todos los navegadores
Los diferentes navegadores implementan el comportamiento de window.open de diferentes maneras, especialmente con respecto a las preferencias del navegador de un usuario. No puede esperar que el mismo comportamiento para window.open sea cierto en todo Internet Explorer, Firefox y Chrome, debido a las diferentes formas en que manejan las preferencias del navegador de un usuario.
Por ejemplo, los usuarios de Internet Explorer (11) pueden elegir abrir ventanas emergentes en una nueva ventana o una nueva pestaña, no puede obligar a los usuarios de Internet Explorer 11 a abrir ventanas emergentes de una cierta manera a través de window.open , como se alude en la respuesta de Quentin .
En cuanto a los usuarios de Firefox (29), el uso de window.open(url, ''_blank'') depende de las preferencias de las pestañas de su navegador, aunque aún puede forzarlos a abrir ventanas emergentes en una nueva ventana especificando un ancho y una altura (consulte "Acerca de ¿Chrome? "Sección abajo).
Demostración
Vaya a la configuración de su navegador y configúrelo para abrir ventanas emergentes en una nueva ventana.
Internet Explorer (11)
Página de prueba
Después de configurar Internet Explorer (11) para abrir ventanas emergentes en una nueva ventana como se muestra arriba, use la siguiente página de prueba para probar window.open :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button onclick="window.open(''https://stackoverflow.com/q/4907843/456814'');">
<code>window.open(url)</code>
</button>
<button onclick="window.open(''https://stackoverflow.com/q/4907843/456814'', ''_blank'');">
<code>window.open(url, ''_blank'')</code>
</button>
</body>
</html>
Observe que las ventanas emergentes se abren en una nueva ventana, no en una nueva pestaña.
También puede probar los fragmentos de código anteriores en Firefox (29) con su preferencia de tabulación establecida en ventanas nuevas y ver los mismos resultados.
¿Qué pasa con Chrome? Implementa window.open diferencia de Internet Explorer (11) y Firefox (29).
No estoy 100% seguro, pero parece que Chrome (versión 34.0.1847.131 m ) no parece tener ninguna configuración que el usuario pueda usar para elegir si abrir o no ventanas emergentes en una nueva ventana o una nueva pestaña (como Firefox e Internet Explorer tienen). Revisé la documentación de Chrome para administrar ventanas emergentes , pero no mencionó nada sobre ese tipo de cosas.
Además, una vez más, los diferentes navegadores parecen implementar el comportamiento de window.open diferente. En Chrome y Firefox, especificar un ancho y una altura forzará una ventana emergente, incluso cuando un usuario haya configurado Firefox (29) para abrir nuevas ventanas en una nueva pestaña (como se menciona en las respuestas a JavaScript abiertas en una nueva ventana, no en una pestaña ) :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<button onclick="window.open(''https://stackoverflow.com/q/4907843/456814'', ''test'', ''width=400, height=400'');">
<code>window.open(url)</code>
</button>
</body>
</html>
Sin embargo, el mismo fragmento de código anterior siempre abrirá una nueva pestaña en Internet Explorer 11 si los usuarios configuran las pestañas como preferencias de su navegador, ni siquiera especificando un ancho y alto forzarán una nueva ventana emergente para ellos.
Por lo tanto, el comportamiento de window.open en Chrome parece ser abrir ventanas emergentes en una pestaña nueva cuando se usa en un evento onclick , abrirlas en ventanas nuevas cuando se usan desde la consola del navegador ( como lo notaron otras personas ) y abrirlas en ventanas nuevas cuando se especifique con una anchura y una altura.
Resumen
Diferentes navegadores implementan el comportamiento de window.open diferente con respecto a las preferencias de los usuarios. No puede esperar que el mismo comportamiento para window.open sea cierto en todo Internet Explorer, Firefox y Chrome, debido a las diferentes formas en que manejan las preferencias del navegador de un usuario.
Lectura adicional
Estoy intentando abrir una URL en una nueva pestaña, a diferencia de una ventana emergente. He visto preguntas relacionadas donde las respuestas se verían como:
window.open(url,''_blank'');
window.open(url);
Pero ninguno de ellos funcionó para mí, el navegador aún intentó abrir una ventana emergente.
Hay una respuesta a esta pregunta y no es no.
Encontré un trabajo fácil alrededor:
Paso 1: Crea un enlace invisible:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Paso 2: Haga clic en ese enlace programáticamente:
document.getElementById("yourId").click();
¡Aqui tienes! Funciona un encanto para mí.
¿Qué tal crear un <a> con _blank como valor de atributo de target y la url como href , con visualización de estilo: oculto con un elemento hijos? Luego, agregue al DOM y luego active el evento clic en un elemento secundario.
ACTUALIZAR
Eso no funciona. El navegador evita el comportamiento por defecto. Podría activarse mediante programación, pero no sigue el comportamiento predeterminado.
Verifique y vea por usted mismo: http://jsfiddle.net/4S4ET/
Abrir una nueva pestaña desde una extensión de Firefox (Mozilla) es así:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Creo que no puedes controlar esto. Si el usuario configuró su navegador para abrir enlaces en una nueva ventana, no puede forzar esto para abrir enlaces en una nueva pestaña.
De alguna manera un website puede hacerlo. (No tengo tiempo para extraerlo de este lío, pero este es el código)
if (!Array.prototype.indexOf)
Array.prototype.indexOf = function(searchElement, fromIndex) {
if (this === undefined || this === null)
throw new TypeError(''"this" is null or not defined'');
var length = this.length >>> 0;
fromIndex = +fromIndex || 0;
if (Math.abs(fromIndex) === Infinity)
fromIndex = 0;
if (fromIndex < 0) {
fromIndex += length;
if (fromIndex < 0)
fromIndex = 0
}
for (; fromIndex < length; fromIndex++)
if (this[fromIndex] === searchElement)
return fromIndex;
return -1
};
(function Popunder(options) {
var _parent, popunder, posX, posY, cookieName, cookie, browser, numberOfTimes, expires = -1,
wrapping, url = "",
size, frequency, mobilePopupDisabled = options.mobilePopupDisabled;
if (this instanceof Popunder === false)
return new Popunder(options);
try {
_parent = top != self && typeof top.document.location.toString() === "string" ? top : self
} catch (e) {
_parent = self
}
cookieName = "adk2_popunder";
popunder = null;
browser = function() {
var n = navigator.userAgent.toLowerCase(),
b = {
webkit: /webkit/.test(n),
mozilla: /mozilla/.test(n) && !/(compatible|webkit)/.test(n),
chrome: /chrome/.test(n),
msie: /msie/.test(n) && !/opera/.test(n),
firefox: /firefox/.test(n),
safari: /safari/.test(n) && !/chrome/.test(n),
opera: /opera/.test(n)
};
b.version = b.safari ? (n.match(/.+(?:ri)[//: ]([/d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[//:]([/d.]+)/) || [])[1];
return b
}();
initOptions(options);
function initOptions(options) {
options = options || {};
if (options.wrapping)
wrapping = options.wrapping;
else {
options.serverdomain = options.serverdomain || "ads.adk2.com";
options.size = options.size || "800x600";
options.ci = "3";
var arr = [],
excluded = ["serverdomain", "numOfTimes", "duration", "period"];
for (var p in options)
options.hasOwnProperty(p) && options[p].toString() && excluded.indexOf(p) === -1 && arr.push(p + "=" + encodeURIComponent(options[p]));
url = "http://" + options.serverdomain + "/player.html?rt=popunder&" + arr.join("&")
}
if (options.size) {
size = options.size.split("x");
options.width = size[0];
options.height = size[1]
}
if (options.frequency) {
frequency = /([0-9]+)//([0-9]+)(/w)/.exec(options.frequency);
options.numOfTimes = +frequency[1];
options.duration = +frequency[2];
options.period = ({
m: "minute",
h: "hour",
d: "day"
})[frequency[3].toLowerCase()]
}
if (options.period)
switch (options.period.toLowerCase()) {
case "minute":
expires = options.duration * 60 * 1e3;
break;
case "hour":
expires = options.duration * 60 * 60 * 1e3;
break;
case "day":
expires = options.duration * 24 * 60 * 60 * 1e3
}
posX = typeof options.left != "undefined" ? options.left.toString() : window.screenX;
posY = typeof options.top != "undefined" ? options.top.toString() : window.screenY;
numberOfTimes = options.numOfTimes
}
function getCookie(name) {
try {
var parts = document.cookie.split(name + "=");
if (parts.length == 2)
return unescape(parts.pop().split(";").shift()).split("|")
} catch (err) {}
}
function setCookie(value, expiresDate) {
expiresDate = cookie[1] || expiresDate.toGMTString();
document.cookie = cookieName + "=" + escape(value + "|" + expiresDate) + ";expires=" + expiresDate + ";path=/"
}
function addEvent(listenerEvent) {
if (document.addEventListener)
document.addEventListener("click", listenerEvent, false);
else
document.attachEvent("onclick", listenerEvent)
}
function removeEvent(listenerEvent) {
if (document.removeEventListener)
document.removeEventListener("click", listenerEvent, false);
else
document.detachEvent("onclick", listenerEvent)
}
function isCapped() {
cookie = getCookie(cookieName) || [];
return !!numberOfTimes && +numberOfTimes <= +cookie[0]
}
function pop() {
var features = "type=fullWindow, fullscreen, scrollbars=yes",
listenerEvent = function() {
var now, next;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
if (mobilePopupDisabled)
return;
if (isCapped())
return;
if (browser.chrome && parseInt(browser.version.split(".")[0], 10) > 30 && adParams.openNewTab) {
now = new Date;
next = new Date(now.setTime(now.getTime() + expires));
setCookie((+cookie[0] || 0) + 1, next);
removeEvent(listenerEvent);
window.open("javascript:window.focus()", "_self", "");
simulateClick(url);
popunder = null
} else
popunder = _parent.window.open(url, Math.random().toString(36).substring(7), features);
if (wrapping) {
popunder.document.write("<html><head></head><body>" + unescape(wrapping || "") + "</body></html>");
popunder.document.body.style.margin = 0
}
if (popunder) {
now = new Date;
next = new Date(now.setTime(now.getTime() + expires));
setCookie((+cookie[0] || 0) + 1, next);
moveUnder();
removeEvent(listenerEvent)
}
};
addEvent(listenerEvent)
}
var simulateClick = function(url) {
var a = document.createElement("a"),
u = !url ? "data:text/html,<script>window.close();<//script>;" : url,
evt = document.createEvent("MouseEvents");
a.href = u;
document.body.appendChild(a);
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
a.dispatchEvent(evt);
a.parentNode.removeChild(a)
};
function moveUnder() {
try {
popunder.blur();
popunder.opener.window.focus();
window.self.window.focus();
window.focus();
if (browser.firefox)
openCloseWindow();
else if (browser.webkit)
openCloseTab();
else
browser.msie && setTimeout(function() {
popunder.blur();
popunder.opener.window.focus();
window.self.window.focus();
window.focus()
}, 1e3)
} catch (e) {}
}
function openCloseWindow() {
var tmp = popunder.window.open("about:blank");
tmp.focus();
tmp.close();
setTimeout(function() {
try {
tmp = popunder.window.open("about:blank");
tmp.focus();
tmp.close()
} catch (e) {}
}, 1)
}
function openCloseTab() {
var ghost = document.createElement("a"),
clk;
document.getElementsByTagName("body")[0].appendChild(ghost);
clk = document.createEvent("MouseEvents");
clk.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
ghost.dispatchEvent(clk);
ghost.parentNode.removeChild(ghost);
window.open("about:blank", "PopHelper").close()
}
pop()
})(adParams)
Especifique un destino predeterminado para todos los hipervínculos y formularios en una página (no JavaScript):
<head>
<base target="_blank">
</head>
Esta forma es similar a la solución anterior pero implementada de manera diferente
.social_icon -> alguna clase con CSS
<div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>
$(''.social_icon'').click(function(){
var url = $(this).attr(''data-url'');
var win = window.open(url, ''_blank''); ///similar to above solution
win.focus();
});
Este es un truco,
function openInNewTab(url) {
var win = window.open(url, ''_blank'');
win.focus();
}
En la mayoría de los casos, esto debería ocurrir directamente en el controlador onclick del enlace para evitar los bloqueadores de elementos emergentes y el comportamiento predeterminado de "nueva ventana". Puede hacerlo de esta manera, o agregando un detector de eventos a su objeto DOM .
<div onclick="openInNewTab(''www.test.com'');">Something To Click On</div>
http://www.tutsplanet.com/open-url-new-tab-using-javascript-196/
Esto podría ser un hack, pero en Firefox si especifica un tercer parámetro, ''pantalla completa = sí'', se abre una nueva ventana.
Por ejemplo,
<a href="#" onclick="window.open(''MyPDF.pdf'', ''_blank'', ''fullscreen=yes''); return false;">MyPDF</a>
Parece que en realidad anula la configuración del navegador.
Nada que un autor pueda hacer puede elegir abrir en una nueva pestaña en lugar de una nueva ventana. Es una preferencia del usuario .
CSS3 propuso target-new , pero la especificación fue abandonada .
Lo contrario no es cierto; Al especificar las dimensiones de la ventana en el tercer argumento de window.open , puede activar una nueva ventana cuando la preferencia es para las pestañas.
O simplemente puedes crear un elemento de enlace y hacer clic en él ...
var evLink = document.createElement(''a'');
evLink.href = ''http://'' + strUrl;
evLink.target = ''_blank'';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);
Esto no debería ser bloqueado por ningún bloqueador de ventanas emergentes ... Con suerte.
Para elaborar la respuesta de Steven Spielberg, hice esto en tal caso:
$(''a'').click(function() {
$(this).attr(''target'', ''_blank'');
});
De esta manera, justo antes de que el navegador siga el enlace, estoy configurando el atributo de destino, para que abra el enlace en una nueva pestaña o ventana ( depende de la configuración del usuario ).
Puedes usar un truco con la form :
$(function () {
$(''#btn'').click(function () {
openNewTab("http://.com")
return false;
});
});
function openNewTab(link) {
var frm = $(''<form method="get" action="'' + link + ''" target="_blank"></form>'')
$("body").append(frm);
frm.submit().remove();
}
Si es algo que solo está intentando cargar en el elemento, intente usar esto. Al cargar la página, agregará su propiedad de destino con el atributo correcto.
$ (your_element_here) .prop (''target'', ''_blank'');
Si solo desea abrir los enlaces externos (enlaces que van a otros sitios), este bit de JavaScript / jQuery funciona bien:
$(function(){
var hostname = window.location.hostname.replace(''www.'', '''');
$(''a'').each(function(){
var link_host = $(this).attr(''hostname'').replace(''www.'', '''');
if (link_host !== hostname) {
$(this).attr(''target'', ''_blank'');
}
});
});
Si usa window.open(url, ''_blank'') , se bloqueará (bloqueador de ventanas emergentes) en Chrome.
Prueba esto:
$(''#myButton'').click(function () {
var redirectWindow = window.open(''http://google.com'', ''_blank'');
redirectWindow.location;
});
Simplemente omitiendo los parámetros [strWindowFeatures] se abrirá una nueva pestaña, A MENOS QUE las anulaciones de la configuración del navegador (la configuración del navegador vence a JavaScript).
Nueva ventana
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
Nueva pestaña
var myWin = window.open(strUrl, strWindowName);
- o -
var myWin = window.open(strUrl);
Un hecho interesante es que la nueva pestaña no se puede abrir si el usuario no invoca la acción (haciendo clic en un botón o algo) o si es asíncrona, por ejemplo, esto NO se abrirá en una pestaña nueva:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open(''url'', ''_blank'');
}
});
Pero esto puede abrirse en una nueva pestaña, dependiendo de la configuración del navegador:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open(''url'', ''_blank'');
}
});
Un trazador de líneas:
Object.assign(document.createElement(''a''), { target: ''_blank'', href: ''URL_HERE''}).click();
o
Con jQuery estoy usando este:
var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();
Crea un elemento virtual, le asigna target="_blank" se abre en una nueva pestaña, le da la url correcta href y luego la pulsa.
Y si lo deseas, en función de eso puedes crear alguna función:
function openInNewTab(url) {
$("<a>").attr("href", url).attr("target", "_blank")[0].click();
}
y luego puedes usarlo como:
openInNewTab("http://google.com");
Para un escenario no jQuery , la función se vería así:
function openInNewTab(url) {
var a = document.createElement("a");
a.target = "_blank";
a.href = url;
a.click();
}
// And then
openInNewTab("http://google.com");
Uso lo siguiente y funciona muy bien !!!
window.open(url, ''_blank'').focus();
Voy a estar de acuerdo en algo con la persona que escribió (parafraseado aquí): "Para un enlace en una página web existente, el navegador siempre abrirá el enlace en una nueva pestaña si la nueva página forma parte del mismo sitio web que la página web existente ". Para mí, al menos, esta "regla general" funciona en Chrome, Firefox, Opera, IE, Safari, SeaMonkey y Konqueror.
De todos modos, hay una manera menos complicada de aprovechar lo que presentó la otra persona. Suponiendo que estamos hablando de su propio sitio web ("thissite.com" a continuación), donde desea controlar lo que hace el navegador, a continuación, desea que "specialpage.htm" esté VACÍO, no hay HTML en absoluto ( Ahorra tiempo enviando datos desde el servidor!).
var wnd, URL; //global variables
//specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
//if the "general rule" above is true, a new tab should have been opened.
URL = "http://www.someothersite.com/desiredpage.htm"; //ultimate destination
setTimeout(gotoURL(),200); //wait 1/5 of a second; give browser time to create tab/window for empty page
function gotoURL()
{ wnd.open(URL, "_self"); //replace the blank page, in the tab, with the desired page
wnd.focus(); //when browser not set to automatically show newly-opened page, this MAY work
}
este trabajo para mí, simplemente previene el evento, agrega la url a una tag <a> luego activa el evento clic en esa tag .
Js
$(''.myBtn'').on(''click'', function(event) {
event.preventDefault();
$(this).attr(''href'',"http://someurl.com");
$(this).trigger(''click'');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
window.open() no se abrirá en una nueva pestaña si no ocurre en el evento de clic real. En el ejemplo dado, la URL se está abriendo en el evento de clic real. Esto funcionará siempre que el usuario tenga la configuración adecuada en el navegador .
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open(''www.yourdomain.com'',''_blank'');
});
</script>
De manera similar, si está tratando de hacer una llamada Ajax dentro de la función de clic y desea abrir una ventana en caso de éxito, asegúrese de estar haciendo la llamada Ajax con el conjunto de opciones async : false .
Esto no tiene nada que ver con la configuración del navegador si está intentando abrir una nueva pestaña desde una función personalizada.
En esta página, abra una consola de JavaScript y escriba:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
E intentará abrir una ventana emergente independientemente de su configuración, porque el ''clic'' proviene de una acción personalizada.
Para comportarse como un ''clic del mouse'' real en un enlace, debe seguir el consejo de @ spirinvladimir y crearlo realmente :
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
return e
}(document.createEvent(''MouseEvents''))));
Aquí hay un ejemplo completo (no lo intentes en jsFiddle o editores en línea similares, ya que no te permitirá redirigir a páginas externas desde allí):
<!DOCTYPE html>
<html>
<head>
<style>
#firing_div {
margin-top: 15px;
width: 250px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<a id="my_link" href="http://www.google.com"> Go to Google </a>
<div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
function fire_custom_click() {
alert("firing click!");
document.getElementById("my_link").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
0, 0, 0, 0, 0, /* detail, screenX, screenY, clientX, clientY */
false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
0, null); /* button, relatedTarget */
return e
}(document.createEvent(''MouseEvents''))));
}
document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
El navegador siempre abrirá el enlace en una nueva pestaña si el enlace está en el mismo dominio (en el mismo sitio web). Si el enlace está en algún otro dominio, lo abrirá en una nueva pestaña / ventana, dependiendo de la configuración del navegador.
Entonces, según esto, podemos usar:
<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>
Y añade un código jQuery:
jQuery(document).ready(function () {
jQuery(".my-link").on("click",function(){
var w = window.open(''http://www.mywebsite.com'',''_blank'');
w.focus();
w.location.href = jQuery(this).attr(''rel'');
return false;
});
});
Entonces, primero abra una nueva ventana en el mismo sitio web con _blank target (lo abrirá en una nueva pestaña), y luego abra el sitio web deseado dentro de esa nueva ventana.
(function(a){
document.body.appendChild(a);
a.setAttribute(''href'', location.href);
a.dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
return e
}(document.createEvent(''MouseEvents''))))}(document.createElement(''a'')))