← Todos los artículos

Tutoriales

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

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.

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso