Home
Tecnologia
Dica de Javascript: Dê aos visitantes a opção de abrir links em nova janela

Dica de Javascript: Dê aos visitantes a opção de abrir links em nova janela

Você sempre aplica manualmente o atributo target=”_blank” às tags <A HREF..> porque prefere que o visitante abra links externos numa nova janela do navegador e não saia do seu site?

É claro que o blog/site é seu e você tem todo o direito de decidir como seus visitantes devem abrir links externos, mas que tal dar aos que visitam o seu site uma opção de decidir se eles querem mesmo abrir hyperlinks em uma nova janela, ou nova aba, no caso de serem usuários do Opera ou do Firefox?

Se ele quiserem voltar ao seu site, podem fazer isso pelo botão da barra de ferramentas no browser. Além do quê, você evita de ter que digitar um atributo a mais [target=”_blank”] em cada hyperlink no código HTML do seu site.

Basicamente, essa opção pode ser dada se você colocar uma caixa de seleção [checkbox] em seu site para que os usuários possam selecionar, se quiserem abrir os links numa nova janela. Implementar essa nova funcionalidade é extremamente simples,

Passo 1: Adicione o seguinte código Javascript em qualquer lugar dentro da seção HEAD da sua template. 

<script type="text/javascript">
// Open Links in New Window ?
function changeHyperLinks(newWindow)  {
  if(newWindow)
    targetWindow ="_blank";
  else
    targetWindow ="_self";
// Process all hyperlinks 
for (var i=0; i
if(document.links[i].href.indexOf("javascript")==-1 &&
document.links[i].href.indexOf(window.location.hostname)==-1){
  document.links[i].target = targetWindow;
    }
  }
}
</script>

Step 2: Modify the body tag to add the onload function

<body onload="changeHyperLinks(true)">

Step 3: Add a checkbox which people can tick to open links in new window.

<form>
<input type="checkbox"
   onclick="changeHyperLinks(this.checked)" checked>
                            Open links in new window
</form>

Passo 2: Modifique a seção BODY para adicionar a função onload 

<body onload="changeHyperLinks(true)">

Passo 3: Adicione uma caixa [checkbox] que os usuários possam marcar para que os links passem a brir em nova janela.

<form>
<input type="checkbox"
   onclick="changeHyperLinks(this.checked)" checked>
                            Open links in new window
</form>

Update: O site Dynamic Drive tem outro script relacionado com a função, que permite ao usuário abrir somente determinados links em nova janela / aba, [tag DIV].


Related Posts

Add Comment