Actualmente estoy trabajando en una extensión de Chrome que me permitirá extraer archivos de fuentes de fuentes en una página web.
Sin embargo, estoy notando que para algunos sitios web (como Ahrefs ) ciertas fuentes se aplican a elementos que no están visibles en la página.
Por ejemplo, si compruebo window.getComputedStyle().fontFamily para la etiqueta <title> , veo la fuente como Times .
Dado que esta es la etiqueta del título, no hay elementos con esa fuente que se muestren en la página. ¿Es posible filtrar solo los nodos que tienen texto visible en la página web?
Nota: Los nodos no tienen que ser visibles solo en la ventana gráfica. Me gusta recoger nodos que están en cualquier parte de la página.
¡Gracias!
Lo mejor podría ser usar querySelectorAll para obtener todos los elementos secundarios dentro body . Envolviendo querySelectorAll con [].slide.call para convertir limpiamente NodeList en un Array, lo que nos permite filtrar con [].filter .
var childNodes = [].slice.call(document.body.querySelectorAll("*")); var visibleNodes = childNodes.filter(node => node.offsetWidth > 0 && node.offsetHeight > 0); En la mayoría de los casos, se prefiere verificar la visibilidad de un elemento utilizando los atributos offsetWidth y offsetHeight de los elementos en comparación con el método ingenuo de jQuery del selector :visible , donde solo verifica si se display: none existe.
Si también desea una lista de todas las familias de fuentes calculadas para elementos visibles, puede usar el mismo window.getComputedStyle para obtener el valor usado y filtrar todos los valores vacíos o nulos con doble !! .
var fontFamilies = visibleNodes.map(node => window.getComputedStyle(node).fontFamily).filter(ff => !!ff)); Usando una lista única de familias de fuentes usando el … de extensión en combinación con Set .
var uniqueFamilies = […new Set(fontFamilies)];