← Tutti gli articoli

Tutorial

Espandi automaticamente "mostra altro" e carica i contenuti paginati

Thread di commenti, recensioni di prodotti, documentazione e risultati di ricerca adorano nascondere i contenuti dietro un pulsante "Mostra altro" o suddividerli su infinite pagine. Con una regola JavaScript JustZix puoi espandere e caricare tutto automaticamente, poi leggere in un unico scorrimento continuo.

Lo schema: clicca finché non sparisce

Una regola di auto-espansione fa una cosa ripetutamente: trova il pulsante, lo clicca, aspetta il nuovo contenuto, ripete — finché il pulsante non è sparito. Ecco una versione autonoma con un limite di sicurezza così non può mai andare in loop all'infinito.

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);

L'intervallo di 800ms dà alla pagina il tempo di renderizzare i nuovi elementi tra un clic e l'altro. Aumentalo per i siti lenti. Il limite maxClicks di 50 previene loop incontrollati sui feed infiniti.

Abbina il pulsante per testo

Se il pulsante non ha un selettore stabile, trovalo invece tramite la sua etichetta. Questo helper restituisce il primo elemento visibile il cui testo corrisponde.

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(['mostra altro', 'carica altro', 'vedi altro', 'show more', 'load more', 'view more', 'see more']);
  if (btn) { btn.click(); } else { clearInterval(timer); }
}, 800);

Il controllo offsetParent !== null salta i pulsanti nascosti, così il loop termina correttamente quando il pulsante reale viene rimosso.

Espandi tutte le sezioni compresse in una volta

Le pagine di documentazione usano spesso molti piccoli interruttori (accordion delle FAQ, esempi di codice). Per aprirli tutti in un colpo, clicca ogni interruttore attualmente compresso.

var toggles = document.querySelectorAll('[aria-expanded="false"]');
toggles.forEach(function (t) {
  t.click();
});

L'attributo aria-expanded è uno standard web, quindi questo funziona su un'ampia gamma di componenti accessibili senza selettori specifici per il sito.

Carica automaticamente la pagina successiva

Per la classica paginazione numerata, puoi tirare gli elementi della pagina successiva in quella corrente. Questa versione trova il link "successivo", recupera la pagina con fetch sulla stessa origine e aggiunge i nuovi elementi della 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 () { /* ignora gli errori di rete */ });
}

loadNextPage('.results-list', 'a[rel="next"]');

Questo richiede pagine solo dallo stesso sito su cui sei già — nessuna chiamata a terze parti. Avvolgilo in un loop con un limite di clic se vuoi più pagine in una volta.

Consigli pratici

Trova versioni pronte negli esempi pronti all'uso, oppure scarica JustZix per iniziare ad automatizzare. Se anche la selezione è disabilitata sul sito, vedi come sbloccare copia e clic destro.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso