Expande automáticamente "mostrar más" y carga contenido paginado
A los hilos de comentarios, las reseñas de productos, la documentación y los resultados de búsqueda les encanta ocultar contenido tras un botón de "Mostrar más" o repartirlo por páginas interminables. Con una regla JavaScript de JustZix puedes expandir y cargar todo ello automáticamente, y luego leer en un desplazamiento continuo.
El patrón: hacer clic hasta que desaparezca
Una regla de expansión automática hace una cosa repetidamente: encontrar el botón, hacer clic, esperar el contenido nuevo, repetir — hasta que el botón desaparezca. Aquí tienes una versión autónoma con un tope de seguridad para que nunca pueda bucle eternamente.
function autoExpand(selector, maxClicks) {
var clicks = 0;
var timer = setInterval(function () {
var btn = document.querySelector(selector);
if (!btn || clicks >= maxClicks) {
clearInterval(timer);
return;
}
btn.click();
clicks++;
}, 800);
}
autoExpand('.show-more-button', 50);
El intervalo de 800ms da a la página tiempo para renderizar los nuevos elementos entre clics. Súbelo para sitios lentos. El tope maxClicks de 50 evita bucles descontrolados en feeds infinitos.
Encontrar el botón por su texto
Si el botón no tiene un selector estable, encuéntralo por su etiqueta. Este ayudante devuelve el primer elemento visible cuyo texto coincide.
function findByText(words) {
var els = document.querySelectorAll('button, a, [role="button"]');
for (var i = 0; i < els.length; i++) {
var t = (els[i].textContent || '').trim().toLowerCase();
for (var j = 0; j < words.length; j++) {
if (t.indexOf(words[j]) !== -1 && els[i].offsetParent !== null) {
return els[i];
}
}
}
return null;
}
var timer = setInterval(function () {
var btn = findByText(['show more', 'load more', 'view more', 'see more']);
if (btn) { btn.click(); } else { clearInterval(timer); }
}, 800);
La comprobación offsetParent !== null salta los botones ocultos, así que el bucle termina correctamente cuando el botón real se elimina.
Expandir cada sección colapsada de una vez
Las páginas de documentación a menudo usan muchos pequeños interruptores (acordeones de preguntas frecuentes, ejemplos de código). Para abrirlos todos de golpe, haz clic en cada interruptor que esté actualmente colapsado.
var toggles = document.querySelectorAll('[aria-expanded="false"]');
toggles.forEach(function (t) {
t.click();
});
El atributo aria-expanded es un estándar web, así que esto funciona en una amplia gama de componentes accesibles sin selectores específicos del sitio.
Cargar automáticamente la página siguiente
Para la paginación numerada clásica, puedes traer los elementos de la página siguiente a la actual. Esta versión encuentra el enlace "siguiente", obtiene la página con fetch en el mismo origen y añade los nuevos elementos de la lista.
function loadNextPage(listSelector, nextSelector) {
var next = document.querySelector(nextSelector);
var list = document.querySelector(listSelector);
if (!next || !list || !next.href) return;
fetch(next.href)
.then(function (r) { return r.text(); })
.then(function (html) {
var doc = new DOMParser().parseFromString(html, 'text/html');
var newList = doc.querySelector(listSelector);
if (newList) {
Array.prototype.forEach.call(newList.children, function (item) {
list.appendChild(item);
});
}
})
.catch(function () { /* ignorar errores de red */ });
}
loadNextPage('.results-list', 'a[rel="next"]');
Esto solo solicita páginas del mismo sitio en el que ya estás — sin llamadas a terceros. Envuélvelo en un bucle con un tope de clics si quieres varias páginas a la vez.
Consejos prácticos
- Fija siempre un tope de clics. El desplazamiento infinito más un bucle sin tope obtendrá contenido para siempre.
- Usa selectores
aria-expandedcuando estén disponibles; sobreviven mejor a los rediseños de los sitios que los nombres de clase. - Prueba la sincronización del intervalo — demasiado rápido y harás clic antes de que el contenido nuevo se asiente.
- Para páginas con un desplazamiento infinito real, expandir todo puede hacer la pestaña pesada; expande por lotes en su lugar.
Encuentra versiones listas para usar en los ejemplos listos para usar, o descarga JustZix para empezar a automatizar. Si la selección también está desactivada en el sitio, consulta desbloquear copiar y clic derecho.
Valora este artículo
Sin valoraciones — sé el primero.