plugin para mostrar anclas en una página HTML?

21

A menudo me encuentro buscando un enlace que me dejará en medio de una página web. A menudo encuentro que la página tiene las <a name='foo'>etiquetas necesarias pero no es una manera fácil (por ejemplo, una tabla de contenido) para encontrarlas. ¿Alguien sabe de un complemento que muestre dónde / qué son esas etiquetas?

Necesitaría Chrome, pero responder a otros sería útil.

FWIW: esto es lo que terminé usando:

javascript:(function(){var i,n,a;as=document.anchors;for(i=0;i<as.length;++i) {a=as[i];n=a.name;a.appendChild(document.createTextNode("#"+n));a.style.border="1px solid";;a.href="#"+n;}})();

Tómelo y póngalo como la dirección del enlace en un marcador.

browser-addons BCS
fuente
1
Gracias. Lástima que esto no parece funcionar con marcos o anclajes de rumbo (es posible anclar en un H1, por ejemplo, no solo en un <A>)
rustyx
@rustyx, no encuentro ningún ejemplo de cómo hacerlo.
BCS
1
@rustyx: consulte gist.github.com/inkarkat/cd1d40996a1f818dfc71 para obtener una versión mejor que admite anclas h1
Rich

Respuestas:

9

Web Development Bookmarklets tiene un bookmarklet de JavaScript llamado anclajes con nombre que insertará enlaces en cada <a name="">ancla. Para usar el bookmarklet, agréguelo a su menú de favoritos o barra de enlaces. Luego, en cualquier página, haga clic en el marcador de "anclas con nombre" para insertar enlaces en la página actual. Sin embargo, no funciona en Wikipedia u otros sitios que usan idatributos de etiquetas como anclas.

Editar:
Mostrar anclajes es un marcador más moderno que muestra elementos <a name="">y idelementos con un icono de ancla. El icono está incrustado en el bookmarklet como una data:URL, por lo que podría no funcionar en navegadores más antiguos. (El enlace bookmarklet está en la parte superior de la publicación).

Bavi_H
fuente
Parece que no puedo hacer que el segundo funcione.
BCS
1
Esta versión de "mostrar anclas" ha mejorado mucho de esa publicación de blog: gist.github.com/inkarkat/cd1d40996a1f818dfc71
Rico
1
Hice una versión que me gusta aún más. En lugar de una imagen de un ancla, hice la visualización del marcador #seguido del nameo iddel elemento: gist.github.com/LucasLarson/d5bd0881d8eb99d9fb254d28e7a315c4
Lucas
0

La respuesta de BCS se adaptó para trabajar con marcos:

javascript:(function(){function f(e){var i,n,a;as=e.anchors;for(i=0;i<as.length;++i){a=as[i];n=a.name;a.appendChild(e.createTextNode('\u2693'+n));a.style.color='#fff';a.style.background='#666';a.style.borderRadius='5px';a.href='#'+n;}}if(window.frames.length)for(var i=0;i<window.frames.length;++i)f(window.frames[i].document);else f(document);})();
Gnubie
fuente