logo oujood
🔍

La méthode window.stop() en JavaScript

Maîtrisez l'interruption programmatique du chargement de page pour optimiser performance et expérience utilisateur

OUJOOD.COM

Définition et fonctionnement de la méthode window.stop()

JavaScript cours tutorial

La méthode window.stop() est une API native du navigateur permettant d'arrêter immédiatement et programmatiquement le chargement de la fenêtre ou de l'onglet courant. Elle constitue l'équivalent JavaScript du clic sur le bouton d'arrêt du navigateur (icône ✕ dans la barre d'adresse), mais déclenchée depuis le code sans intervention de l'utilisateur.

Concrètement, lorsque window.stop() est invoquée, le moteur du navigateur interrompt immédiatement le téléchargement de toutes les ressources en attente dans la file de chargement : images haute résolution, scripts externes asynchrones, feuilles de style CSS, iframes embarquées, polices web, et tout autre asset réseau non encore reçu. Les ressources déjà entièrement chargées en mémoire restent disponibles.

Cette méthode s'avère particulièrement précieuse dans plusieurs scénarios d'optimisation de performance web : interruption volontaire du chargement d'assets non critiques pour réduire le temps d'interaction (TTI), annulation de requêtes réseau sur connexion mobile lente, ou contrôle du flux de chargement dans des applications single-page (SPA) à architecture complexe.

Syntaxe et valeur de retour

window.stop()

Paramètres : Aucun paramètre n'est accepté — la méthode s'appelle sans argument.

Valeur de retour : undefined — la méthode ne retourne aucune valeur exploitable.

Appartenance : La méthode est définie sur l'objet global window, accessible aussi via self.stop() dans un contexte worker ou directement stop() dans le scope global du navigateur.

Exemple 1 : Interruption du chargement dès le parsing du <head>

Ce premier exemple illustre le cas d'usage fondamental : appeler window.stop() dans le <head> de la page, avant que le navigateur n'ait commencé à charger les ressources du <body>. C'est la démonstration la plus directe du comportement de cette méthode.

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple window.stop() basique</title>
  <script>
    // window.stop() est appelé ici, dans le <head>,
    // AVANT que le navigateur ne commence à parser le <body>.
    // Résultat : le contenu du <body> (texte, images, iframes)
    // ne sera pas chargé ni affiché — la page restera vide.
    window.stop();
  </script>
</head>
<body>
  <!-- Ce contenu ne s'affichera pas car window.stop()
       a interrompu le chargement avant que le navigateur
       n'atteigne cette partie du document HTML -->
  <p>Ce texte ne sera jamais affiché.</p>
  <iframe src="https://www.example.com"></iframe>
</body>
</html>

Dans cet exemple, window.stop() s'exécute pendant la phase de parsing HTML, au sein du <head>. Le navigateur interrompt alors le traitement du reste du document : le contenu du <body>, y compris le paragraphe et l'iframe, ne sera jamais rendu. C'est la preuve que l'ordre d'appel dans le cycle de vie de la page est déterminant.

Exemple 2 : Interruption conditionnelle avec détection de lenteur réseau

Ce cas d'usage plus avancé montre comment utiliser window.stop() de façon intelligente et conditionnelle, en combinaison avec l'API Network Information disponible dans les navigateurs modernes. L'objectif est d'arrêter le chargement des ressources lourdes uniquement lorsque la connexion est lente, pour améliorer le Core Web Vitals sur mobile.

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>window.stop() conditionnel selon la vitesse réseau</title>
  <script>
    // L'API Network Information (navigator.connection) permet
    // de connaître le type de connexion de l'utilisateur.
    // effectiveType peut valoir : '4g', '3g', '2g', 'slow-2g'
    const connection = navigator.connection
      || navigator.mozConnection
      || navigator.webkitConnection;
    // On vérifie si l'API est disponible ET si la connexion
    // est lente (2g ou slow-2g = moins de 70 kbps)
    if (connection && (connection.effectiveType === '2g'
        || connection.effectiveType === 'slow-2g')) {
      // Connexion trop lente : on arrête le chargement
      // des ressources non critiques (images, iframes lourdes)
      // pour afficher le contenu textuel rapidement.
      window.stop();
      document.addEventListener('DOMContentLoaded', function() {
        const banner = document.getElementById('slow-connection-notice');
        if (banner) banner.style.display = 'block';
      });
    }
  </script>
</head>
<body>
  <!-- Message affiché uniquement sur connexion lente,
       injecté dynamiquement par le script ci-dessus -->
  <div id="slow-connection-notice" style="display:none;
    background:#fff3cd; padding:10px; border-radius:4px;">
    <strong>Connexion lente détectée :</strong>
    certaines ressources n'ont pas été chargées pour
    améliorer la vitesse d'affichage.
  </div>
  <h1>Contenu principal (chargé en priorité)</h1>
  <img src="image-haute-resolution.jpg"
    alt="Image optionnelle non critique">
</body>
</html>

Cette approche met en œuvre le principe du chargement progressif adaptatif (adaptive loading), une technique recommandée par Google pour améliorer les scores Largest Contentful Paint (LCP) et First Input Delay (FID) sur les appareils à faible connectivité. L'API navigator.connection est disponible dans Chrome 61+, Edge 79+ et Opera, mais pas dans Firefox ni Safari — vérifiez toujours sa disponibilité avant utilisation.

Exemple 3 : Arrêt du chargement d'une iframe embarquée via JavaScript

Un autre usage fréquent consiste à contrôler le chargement d'une iframe dynamique. Plutôt que d'appeler window.stop() sur la fenêtre principale, on accède à la fenêtre de l'iframe pour stopper son chargement indépendamment.

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Arrêter le chargement d'une iframe</title>
</head>
<body>
  <h1>Contrôle du chargement d'une iframe</h1>
  <!-- L'iframe commence à charger une page externe lourde -->
  <iframe id="ma-frame"
    src="https://www.example.com/page-lourde"
    width="600" height="400"></iframe>
  <button id="btn-stop">Arrêter le chargement de l'iframe</button>
  <script>
    document.getElementById('btn-stop')
      .addEventListener('click', function() {
        // On récupère l'élément iframe dans le DOM
        const frame = document.getElementById('ma-frame');
        // On accède à la propriété contentWindow qui représente
        // l'objet window interne à l'iframe (si même origine)
        // puis on appelle stop() sur cette fenêtre spécifique
        if (frame && frame.contentWindow) {
          frame.contentWindow.stop();
          // Feedback utilisateur après l'arrêt
          this.textContent = '✅ Chargement interrompu';
          this.disabled = true;
        }
      });
  </script>
</body>
</html>

Cette technique de contrôle granulaire par iframe est particulièrement utile dans les portails et dashboards embarquant des contenus tiers. Notez cependant que contentWindow.stop() ne fonctionne que si l'iframe est de même origine (même domaine, protocole et port) — la politique CORS bloque l'accès cross-origin.

Compatibilité navigateurs et bonnes pratiques 2026

En 2026, la méthode window.stop() bénéficie d'un excellent support dans tous les navigateurs modernes basés sur Chromium (Chrome 105+, Edge 105+, Opera 91+, Brave), ainsi que dans Firefox et Safari. Internet Explorer (abandonné officiellement par Microsoft en juin 2022) ne la supportait pas, et ce navigateur ne représente plus de part de marché significative.

Pour une utilisation robuste en production, il est recommandé d'implémenter une vérification de disponibilité avant l'appel :

  📋 Copier le code

<script>
  // Bonne pratique : vérifier que window.stop existe
  // avant de l'appeler pour éviter les erreurs silencieuses
  // dans des environnements non-navigateur (Node.js, workers)
  if (typeof window.stop === 'function') {
    window.stop();
  } else {
    // Fallback : alternative pour les contextes non supportés
    // On peut utiliser document.execCommand('Stop') pour IE (obsolète)
    // ou simplement ignorer l'interruption
    console.warn('window.stop() non disponible dans cet environnement');
  }
</script>

sommaire

Par carabde | Publié le 30 mars 2014 | Mis à jour le 18 février 2026