8 de dezembro de 2006

Abrir sempre o link externo em nova janela e marcar a tag com CSS

CSS, Javascript | 2 Comentários »
por Ricardo José Corrêa

O script visto neste artigo tem a função de que sempre que um link tiver a referência como “external” abra em nova janela, e os que tiverem o target=”_blank” sejam setados como rel=”external”, além de mudar/incluir o nome da class no link, para que assim todos tenham um marcardor (iconografia de link externo) de link externo.
O legal é que não precisa fazer mais nada, o .js incluso na página se vira.

external.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Troca CSS e abre em nova janela, sempre</title>
<style>
.linkExterno { background:url("external.gif") right 2px no-repeat; cursor:pointer; padding-right:13px; }
</style>
</head>
<body>
<script xsrc="external.js" mce_src="external.js"     ></script>
<a xhref="http://www.rjcorrea.com.br/#" mce_href="http://www.rjcorrea.com.br/#"     target="_blank">Link
externo com target blank</a><br />
<a xhref="http://www.rjcorrea.com.br/#" mce_href="http://www.rjcorrea.com.br/#"     rel="external">Link
externo com rel external</a>
</body>
</html>

external.js

///////////////////////////////////////////////////////////////////////////
////////////////////////////////// RjCorrêa ///////////////////////////////
/////Abrir sempre o link externo em nova janela e marcar a tag com CSS/////
///////////////////////www.rjcorrea.com.br/////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//////////////////////V. 2.0 /// Ajustada Por Fábio A. ////////////////////
///////////////////////////fabioarantes@gmail.com//////////////////////////
var Trocar = new Object();
Trocar.verify = function () {
var nav = navigator.appName;
if(nav != "Microsoft Internet Explorer"){
document.addEventListener("DOMContentLoaded", Trocar.trocar, false);
} else {
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( Trocar.trocar, 0 );
return;
}
}
}
Trocar.trocar = function () {
if (document.getElementsByTagName) {
links = document.getElementsByTagName('a');
for (k = 0; k < links.length; k++) {
if (links[k].getAttribute('href') &amp;&amp; links[k].getAttribute('target') == "_blank" || links[k].getAttribute('rel') == "external"){
links[k].className = "linkExterno";
links[k].target = '_blank';
links[k].rel = 'external';
}
}
}
}
 
Trocar.verify();

Leia também:

  1. Abrir janela no tamanho da imagem
  2. Desabilita o(s) botão(ões) submit após o envio de formulário com Javascript
  3. Microformat: Hide / Show objects – div, ul etc.
  4. Popup para abrir imagem? Lightbox.
  5. Dar nome a janela/documento

Você pode deixar um comentário, ou trackback de seu próprio site.

2 comentários para “Abrir sempre o link externo em nova janela e marcar a tag com CSS”

  1. Lurdes Costa falou:
    fevereiro 11th, 2007 at 5:32

    Parabéns. Muito interessante e digno de estudo.

  2. Roberta da Fonte falou:
    outubro 1st, 2009 at 1:35

    Boa noite, Ricardo.

    Não estou conseguindo colocar para funcionar no meu blog. Você poderia me ajudar? Não entendo muita coisa… Aliás, as alterações que fiz até agora foi fuçando dicas como a sua.

    Obrigada,

    Roberta

Deixe um comentário