← Tous les articles

Tutoriels

Déployez automatiquement « voir plus » et chargez le contenu paginé

17 mai 2026 · par JustZix Team

Les fils de commentaires, les avis produits, la documentation et les résultats de recherche adorent cacher le contenu derrière un bouton « Voir plus » ou le découper sur des pages sans fin. Avec une règle JavaScript JustZix, vous pouvez tout déployer et charger automatiquement, puis lire dans un défilement continu.

Le motif : cliquer jusqu'à disparition

Une règle de déploiement automatique fait une chose de façon répétée : trouver le bouton, le cliquer, attendre le nouveau contenu, recommencer — jusqu'à ce que le bouton ait disparu. Voici une version autonome avec un plafond de sécurité pour qu'elle ne puisse jamais boucler indéfiniment.

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'intervalle de 800 ms donne à la page le temps d'afficher les nouveaux éléments entre les clics. Augmentez-le pour les sites lents. Le plafond maxClicks de 50 empêche les boucles emballées sur les fils infinis.

Correspondre au bouton par le texte

Si le bouton n'a pas de sélecteur stable, trouvez-le plutôt par son étiquette. Cette fonction utilitaire renvoie le premier élément visible dont le texte correspond.

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 vérification offsetParent !== null ignore les boutons masqués, donc la boucle se termine correctement quand le vrai bouton est retiré.

Déployer toutes les sections repliées d'un coup

Les pages de documentation utilisent souvent de nombreux petits boutons à bascule (accordéons de FAQ, exemples de code). Pour les ouvrir tous d'un seul coup, cliquez chaque bascule actuellement repliée.

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

L'attribut aria-expanded est un standard du web, donc ceci fonctionne sur une large gamme de composants accessibles sans sélecteurs spécifiques au site.

Charger automatiquement la page suivante

Pour la pagination numérotée classique, vous pouvez tirer les éléments de la page suivante dans la page courante. Cette version trouve le lien « suivant », récupère la page avec fetch sur la même origine, et ajoute les nouveaux éléments de liste.

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 () { /* ignorer les erreurs réseau */ });
}

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

Ceci ne demande que des pages du même site sur lequel vous êtes déjà — aucun appel tiers. Enveloppez-le dans une boucle avec un plafond de clics si vous voulez plusieurs pages d'un coup.

Conseils pratiques

• Réglez toujours un plafond de clics. Un défilement infini plus une boucle sans plafond va chercher du contenu indéfiniment.
• Utilisez les sélecteurs aria-expanded quand ils sont disponibles ; ils survivent mieux aux refontes de site que les noms de classes.
• Testez la synchronisation de l'intervalle — trop rapide et vous cliquez avant que le nouveau contenu ne se stabilise.
• Pour les pages à véritable défilement infini, tout déployer peut alourdir l'onglet ; déployez plutôt par lots.

Trouvez des versions prêtes à l'emploi dans les exemples prêts à l'emploi, ou téléchargez JustZix pour commencer à automatiser. Si la sélection est aussi désactivée sur le site, voyez débloquer la copie et le clic droit.