Abrir um URL numa página nova (e não numa janela nova) usando o JavaScript
estou a tentar abrir um URL numa nova página, em vez de uma janela de contexto. Já vi perguntas relacionadas em que as respostas pareceriam algo como:
window.open(url,'_blank');
window.open(url);
27 answers
Nada que um autor possa fazer pode optar por abrir numa página nova em vez de uma janela nova. É uma preferência de utilizador .
O CSS3 proposto alvo-novo, mas a especificação foi abandonada.
O reverso não é verdadeiro; ao indicar as dimensões da janela no terceiro argumento de window.open, poderá activar uma nova janela quando a preferência for pelas Páginas.
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
Na maioria dos casos, isto deve acontecer diretamente no manipulador {[[2]} para o link para evitar bloqueadores pop-up, e o comportamento padrão de "nova janela". Você poderia fazê-lo desta forma, ou adicionando um ouvinte de eventos ao seu objeto DOM.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
Http://www.tutsplanet.com/open-url-new-tab-using-javascript-196/
window.open() não irá abrir numa página nova se não estiver a acontecer no evento actual. No exemplo dado o URL está sendo aberto no evento real clique. Isto irá funcionar desde que o utilizador tenha as configurações adequadas no navegador.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Da mesma forma, se estiver a tentar fazer uma chamada Ajax dentro da função click e quiser abrir uma janela sobre o sucesso, certifique-se que está a fazer a chamada Ajax com a opção async : false definida.
window.open não é possível abrir de forma fiável Popups numa página nova em todos os navegadores
Diferentes navegadores implementam o comportamento de window.open de diferentes maneiras, especialmente no que diz respeito às preferências do navegador de um usuário. Você não pode esperar o mesmo comportamento para window.open para ser verdadeiro em todos os Internet Explorer, Firefox, e Chrome, por causa das diferentes maneiras em que eles lidam com as preferências de navegador de um usuário.
window.open, como referido na resposta do Quentin.
Quanto aos utilizadores do Firefox (29), utilizando window.open(url, '_blank') depende das preferências de tabulação do seu navegador, embora ainda possa obrigá-los a abrir popups numa nova janela, especificando uma largura e uma altura (veja "e o Chrome?" abaixar).
Demonstração
Vá para o seu configuração do navegador e configure-o para abrir os popups numa nova janela.
Internet Explorer (11)
Página De Ensaio
Depois de configurar o Internet Explorer (11) para abrir popups numa nova janela, como demonstrado acima, use a seguinte página de teste para testar 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 os popups são abertos numa janela nova, não numa página Nova.
Também pode testar esses excertos acima no Firefox (29) com sua preferência de tabulação definida para novas janelas, e ver os mesmos resultados.
E O Cromado? Ele implementawindow.open diferentemente do Internet Explorer (11) e Firefox (29).
Não tenho 100% de certeza, mas parece que o Chrome (versão 34.0.1847.131 m) não parece ter nenhuma configuração que o utilizador possa usar para escolher se deve ou não abrir popups numa nova janela ou numa nova página (como o Firefox e o Internet Explorer têm). Eu verifiquei a documentação cromada para gerir pop-ups , mas não mencionou nada sobre esse tipo de coisas.
Também, mais uma vez, diferentes navegadores parecem implementar o comportamento de window.open diferente. No Chrome e Firefox, especificar a largura e a altura vai forçar uma pop-up, mesmo quando um usuário tiver definido o Firefox (29) para abrir novas janelas em uma nova guia (como mencionado nas respostas para JavaScript abrir em uma nova janela, não guia):
<!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>
No entanto, o mesmo excerto de código acima irá sempre abrir uma nova página no Internet Explorer 11 se os utilizadores definirem as páginas como Preferências do seu navegador, nem sequer indicar uma largura e altura irá forçar uma nova janela a aparecer para eles.
Assim, o comportamento de window.open no Chrome parece ser abrir os popups numa nova página quando usado num evento onclick, para os Abrir em janelas novas quando usadas na consola do navegador (como observado por outras pessoas ), e para os Abrir em janelas novas quando especificadas com uma largura e uma altura.
Resumo
Diferentes navegadores implementam o comportamento de window.open diferentemente no que diz respeito às preferências do navegador dos utilizadores. Você não pode esperar o mesmo comportamento para window.open para ser verdadeiro em todos os Internet Explorer, Firefox, e Chrome, por causa das diferentes maneiras em que eles lidam com as preferências de navegador de um usuário.
Leitura Adicional
Uma linha:
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Ou
Com jQuery estou a usar este:
var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();
Cria um elemento virtual a, dá-lhe target="_blank" por isso abre numa nova página, dá-lhe o devido url href e depois clica.
E se quiseres, com base nisso podes criar alguma função:
function openInNewTab(url) {
$("<a>").attr("href", url).attr("target", "_blank")[0].click();
}
E depois podes usá-lo como:
openInNewTab("http://google.com");
Para um cenário não-jQuery , a função seria assim:
function openInNewTab(url) {
var a = document.createElement("a");
a.target = "_blank";
a.href = url;
a.click();
}
// And then
openInNewTab("http://google.com");
$('a').click(function() {
$(this).attr('target', '_blank');
});
Desta forma, pouco antes do navegador seguir a ligação que estou a definir o atributo de destino, por isso fará a ligação abrir numa nova página ou janela (depende da configuração do utilizador).
Se utilizar window.open(url, '_blank'), será bloqueado (bloqueador popup) no Chrome.
Tenta isto:
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
Eu uso o seguinte e funciona muito bem!!!
window.open(url, '_blank').focus();
Um facto interessante é que a nova página não pode ser aberta se a acção não for invocada pelo utilizador (ao carregar num botão ou assim) ou se for assíncrona, por exemplo, isto não irá abrir na nova página:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
Mas isto pode abrir numa página Nova, dependendo da configuração do navegador:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});
Se omitir apenas os parâmetros [strWindowFeatures] irá abrir uma nova página, a menos que a configuração do navegador se sobreponha (a configuração do navegador sobrepõe-se ao JavaScript).
Nova janela
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
Página Nova
var myWin = window.open(strUrl, strWindowName);
-- or --
var myWin = window.open(strUrl);
(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')))
form:
$(function () {
$('#btn').click(function () {
openNewTab("http://stackoverflow.com")
return false;
});
});
function openNewTab(link) {
var frm = $('<form method="get" action="' + link + '" target="_blank"></form>')
$("body").append(frm);
frm.submit().remove();
}
Isto não tem nada a ver com a configuração do navegador Se estiver a tentar abrir uma página nova a partir de uma função personalizada.
Nesta página, abra uma consola de JavaScript e escreva:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
E ele vai tentar abrir um popup independentemente das suas configurações, porque o 'clique' vem de uma ação personalizada.
Para se comportar como um verdadeiro 'clique do rato' num link, você precisa seguir o conselho de@spirinvladimir e realmente crie-o:
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'))));
<!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>
Ou podes criar um elemento de ligação e clicar nele...
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);
Se é algo que está apenas a tentar carregar no elemento, tente usar isto. Na carga da página, irá adicionar a sua propriedade de destino com o atributo correcto.
$(your_element_here).prop ("alvo", "_blank");
Encontrei um trabalho fácil.
Passo 1: Criar uma ligação invisível:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Passo 2: Carregue nessa ligação programaticamente:
document.getElementById("yourId").click();
Que tal criar um <a> com _blank como target o valor do atributo e o url como href, com a apresentação do estilo:escondido com um elemento infantil? Em seguida, adicionar ao DOM e, em seguida, desencadear o evento clique em um elemento crianças.
Actualizar
Isso não funciona. O navegador evita o comportamento padrão. Pode ser activado programaticamente, mas não segue o comportamento padrão.Verifique e veja por si mesmo: http://jsfiddle.net/4S4ET/
Este trabalho para mim, basta prevenir o evento, adicionar a url a um <a> tag em seguida, active o evento click nesse 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>
Abrir uma nova página de dentro de uma extensão Firefox (Mozilla) é assim:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Desta forma é semelhante à solução acima, mas implementada de forma diferente
.social_icon- > alguma classe com 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();
});
Isto pode ser um hack, mas no Firefox se você especificar um terceiro parâmetro, 'fullscreen=Yes', ele abre uma nova janela.
Por exemplo,
<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>
Parece realmente sobrepor-se à configuração do navegador.
Indique um alvo por omissão para todas as hiperligações e formulários numa página (Não-JavaScript):
<head>
<base target="_blank">
</head>
Eu vou concordar um pouco com a pessoa que escreveu (parafraseado aqui): "para um link em uma página web existente, o navegador sempre abrirá o link em uma nova página se a nova página é parte do mesmo site que a página web existente. Para mim, pelo menos, esta "regra geral" funciona em Chrome, Firefox, Opera, IE, Safari, SeaMonkey, e Konqueror.
De qualquer forma, há uma maneira menos complicada de aproveitar o que a outra pessoa apresentou. Supondo que estamos a falar de TI sítio web próprio ("thissite.com" abaixo), onde você quer controlar o que o navegador faz, então, abaixo, você quer " página especial.htm " para estar vazio, nenhum HTML em tudo nele (economiza tempo enviando dados do 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
}
Se você só quiser abrir os links externos (links que vão para outros sites) então este bit de JavaScript / jQuery funciona bem:
$(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');
}
});
});
De alguma forma um site pode fazê-lo. (Eu não tenho tempo para extraí-lo desta confusão, mas este é o 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)
O navegador sempre abrirá o link em uma nova página se o link estiver no mesmo domínio (no mesmo site). Se o link estiver em algum outro domínio, ele irá abri-lo em uma nova página/janela, dependendo da configuração do navegador.
Então, de acordo com isto, podemos usar:<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>
E adicionar um 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;
});
});
Então, Primeiro abra uma nova janela no mesmo site com o alvo _brank (ele irá abri-la em nova página), e então abra o seu site desejado dentro dessa nova janela.