Para que serve window.location.href e window.open em JavaScript

Neste artigo você vai aprender para que serve serve window.location.href e também o window.open, que são recursos de JavaScript

Ler window.location.href devolve a URL completa da página, e atribuir um valor novo faz o navegador navegar pra URL informada, na mesma aba

Atribuir direto em window.location dá no mesmo: o documento carrega como se location.assign() tivesse sido chamado, e a página anterior continua no histórico

Já window.open(url, target, windowFeatures) abre um novo contexto de navegação e devolve uma referência pra ele, sendo _blank o alvo padrão

Sem nenhuma feature de popup na string windowFeatures o conteúdo abre como aba, e features como largura e altura fazem o navegador abrir uma janela popup

Quando o navegador não consegue abrir, window.open() devolve null (bloqueador de popup é o caso clássico), então vale testar o retorno

Regra de bolso: quer levar o usuário embora da página atual? href

Quer manter a página e abrir outra coisa do lado? open

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Vamos entender melhor primeiro o window.location.href, este recurso é uma propriedade do objeto window

Se resgatarmos o seu valor, teremos a URL atual da página

Porém se for atribuído um novo valor a esta propriedade, redirecionaremos para uma outra página

Exemplo:

window.location.href = 'http://www.google.com';

No código acima temos um redirecionamento do site atual para o Google, tudo feito via JavaScript

Agora window.open é um método do objeto window

Note a diferença nos parentêses, não temos eles em href, mas temos eles em open

Onde inserimos uma URL, esta será aberta em uma nova aba do navegador

Ou seja, em vez de redirecionar o usuário, teremos a abertura de uma nova aba com uma URL específica

Exemplo:

window.open('http://www.google.com');

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Neste exemplo acima temos a abertura de uma nova aba utilizando o método open

Agora basta você avaliar qual abordagem é a mais indicada para o seu projeto

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu para que serve window.location.href e também o window.open

Vimos que href é uma propriedade do objeto window, e serve para redirecionar o usuário para outra URL na aba atual

Já open é um método, e abre uma URL específica em uma nova aba

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Bloco de resposta rápida (usar o texto de geo.respostaDireta), sem título de seção, só como primeiro bloco do post

H2: href, assign() e replace(): qual deles some com o botão voltar?

Antes de sair redirecionando, entende uma coisa: existe mais de um jeito de navegar por JavaScript, e a diferença entre eles mora no histórico de sessão

Atribuir um valor direto em window.location dá exatamente no mesmo que atribuir em window.location.href, o documento carrega como se location.assign() tivesse sido chamado

[bloco de código] // os três de baixo fazem a mesma coisa window.location.href = ‘https://horadecodar.com.br’; window.location = ‘https://horadecodar.com.br’; window.location.assign(‘https://horadecodar.com.br’);

Depois do assign() (e da atribuição de href) o usuário ainda consegue voltar pela setinha do navegador, a página que chamou continua no histórico

Aí entra o irmão diferentão:

[bloco de código] window.location.replace(‘https://horadecodar.com.br’);

Com replace() a página atual NÃO é salva no histórico de sessão, ou seja, o botão voltar não leva o usuário de volta pra ela

Tome cuidado com isso! Redirecionamento pós-login ou pós-checkout costuma pedir replace() justamente pra não deixar o cara voltar pra uma tela que já não vale mais, mas usar replace() em navegação comum é um jeito rápido de irritar quem tá lendo 😛

H2: Os três parâmetros do window.open():

O open aceita bem mais que a URL, a assinatura completa é window.open(url, target, windowFeatures) e ele devolve uma referência pro novo contexto de navegação

[bloco de código] const janela = window.open(‘https://horadecodar.com.br’, ‘_blank’);

O segundo parâmetro é o alvo, e ele aceita palavras-chave especiais: _self, _blank (que é o padrão), _parent, _top e _unfencedTop

É por isso que o exemplo lá de cima abre em nova aba mesmo sem tu passar nada no segundo argumento, o padrão já é _blank

E o terceiro? É a string windowFeatures, e é ela que decide se tu vai ver uma ABA ou uma janela popup com UI mínima

Sem nenhuma feature de popup informada, o conteúdo abre como aba

Já quando tu manda coisas como largura e altura, o navegador entende que tu quer um popup e abre a janelinha separada, com posição e tamanho

Ou seja: aba e popup não são funções diferentes, é o mesmo open com o terceiro argumento mudando o jogo

H2: Por que meu window.open não abre nada?

Esse é o clássico que faz todo mundo achar que o código quebrou

O window.open() devolve um objeto WindowProxy quando dá certo, e devolve null quando o navegador não consegue abrir o novo contexto, sendo o bloqueador de popup o caso mais comum

Caso isso aconteça, o teste é simples:

[bloco de código] const janela = window.open(‘https://horadecodar.com.br’);

if (!janela) { console.log(‘o navegador barrou a abertura’); }

E por que ele barra? Porque open é um recurso condicionado à ativação transitória do usuário

Ativação transitória? É o navegador dizendo assim: só libero se veio de uma interação confiável, tipo um clique ou uma tecla

Essa ativação ainda pode ser consumida por recursos como o próprio window.open() e expira por tempo se não for renovada por uma nova interação

Na prática: chamar open dentro do callback de um clique funciona, chamar open num setTimeout solto ou num retorno de fetch tende a ser bloqueado

[bloco de código] botao.addEventListener(‘click’, () => { window.open(‘https://horadecodar.com.br’, ‘_blank’); });

Já me ferrei uma vez tentando abrir aba depois de uma requisição terminar, o navegador simplesmente engoliu a chamada e não avisou nada

H2: window.open e segurança: o tal do noopener

Se liga nisso, porque muita gente não sabe

O padrão HTML define que âncoras com target=_blank se comportam como se rel=noopener estivesse presente, e é isso que protege teus links comuns

Só que essa mitigação automática NÃO vale pro window.open(), ali tu precisa passar noopener na mão, dentro da string de features

[bloco de código] window.open(‘https://horadecodar.com.br’, ‘_blank’, ‘noopener’);

O risco tem nome: reverse tabnabbing, e a OWASP registra que o ataque também se aplica a links abertos pela função JavaScript window.open, não só a âncoras com target=_blank

Com noopener, a nova janela deixa de acessar a janela de origem por Window.opener, e a chamada passa a devolver null

Outro detalhe: com noopener, nomes de alvo não vazios (fora de _top, _self e _parent) passam a se comportar como _blank

Tradução: ou tu quer a referência da janela filha, ou tu quer o isolamento, os dois juntos não rola

H2: Dá pra controlar a janela que o window.open abriu?

Dá, com limite

A referência devolvida pelo open só te deixa acessar propriedades e métodos do novo contexto dentro da política de mesma origem

Se tu abriu um site de outro domínio e tentar ler algo dali, o navegador nega o acesso, com aquele recado de permissão negada ao acessar propriedade em objeto cross-origin

E tem mais um convidado na festa: o cabeçalho HTTP Cross-Origin-Opener-Policy

Quando o COOP leva o documento pra um novo grupo de contextos de navegação, as referências entre a janela que abriu e a janela aberta são cortadas, e o objeto que tu guardou passa a indicar closed = true

Ou seja: guardar a referência é útil pra páginas do teu próprio domínio, pra site de terceiro trata como se tu não tivesse controle nenhum

H2: Perguntas frequentes sobre window.location.href e window.open (usar as perguntas e respostas de geo.faq como H3 + resposta curta)

E vimos também que existe vida além dos dois: assign() e replace() mudam o comportamento do botão voltar, o segundo e o terceiro parâmetro do open decidem se sai aba ou popup, o retorno null denuncia bloqueio de popup e o noopener protege a tua página de reverse tabnabbing

Agora sim tu tem o mapa completo pra escolher a abordagem certa no teu projeto 😀

Não há material próprio testado sobre window.open e window.location.href disponível nesta rodada (o material existente é de outro assunto), então nenhum bloco de experiência foi escrito e nada do tipo "testamos aqui" entra no post.

O que precisaria ser testado pra virar primeira mão de verdade: (1) chamar window.open dentro do callback de clique x dentro de setTimeout x depois de um fetch, anotando em quais casos o retorno vem null; (2) abrir com e sem ‘noopener’ e checar no console se window.opener chega preenchido na janela filha; (3) abrir com windowFeatures vazio x com largura e altura, registrando print de aba x popup; (4) guardar a referência e tentar ler uma propriedade de página same-origin x cross-origin, capturando a mensagem de erro real do navegador; (5) servir uma página com Cross-Origin-Opener-Policy e observar a referência virar closed = true. Com esses prints e mensagens de console em mãos, o bloco de experiência fica legítimo.