logo oujood
🔍

  HTML attribut d'événement onbeforeprint

OUJOOD.COM

Définition et utilisation de l'événement onbeforeprint

LES BALISES HTML

L'attribut onbeforeprint se déclenche juste avant l'ouverture de la boîte de dialogue d'impression — c'est-à-dire dès que l'utilisateur lance une impression, mais avant que la fenêtre de confirmation n'apparaisse à l'écran.

Il fonctionne aussi lors d'un aperçu avant impression : le script se lance dès que le navigateur prépare l'affichage de prévisualisation.

À quoi sert-il concrètement ? Vous pouvez l'utiliser pour masquer certains éléments inutiles à l'impression, afficher un message de confirmation, ou encore charger une feuille de style dédiée à l'impression juste à temps.

astuceAstuce : onbeforeprint s'utilise presque toujours en tandem avec onafterprint, qui se déclenche lui après la fermeture de la boîte d'impression.

Syntaxe

<body onbeforeprint="script">

Valeurs d'attribut

Valeur

Description

script

Le nom de la fonction JavaScript à exécuter au déclenchement de onbeforeprint.

Exemple : afficher une alerte avant l'impression

Dans cet exemple, une alerte JavaScript s'affiche dès que l'utilisateur tente d'imprimer la page. Le code est placé directement dans l'attribut onbeforeprint de la balise <body>.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple onbeforeprint</title>
  <script>
    /* Fonction appelée juste avant l'ouverture de la boîte d'impression */
    function avertirAvantImpression() {
      alert("Ce document est sur le point d'être imprimé !");
    }
  </script>
</head>
<body onbeforeprint="avertirAvantImpression()">
  <h1>Testez l'impression de cette page</h1>
  <p>Appuyez sur <kbd>Ctrl + P</kbd> (Windows) ou <kbd>Cmd + P</kbd> (Mac) pour déclencher l'événement.</p>
</body>
</html>

Exemple bonus : masquer un élément avant impression

Un cas d'usage plus pratique : cacher automatiquement la barre de navigation avant d'imprimer, puis la réafficher après. Cela évite que des menus inutiles apparaissent sur la page imprimée.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Masquer nav avant impression</title>
  <script>
    /* Cache le menu avant l'impression */
    function cacherNav() {
      document.getElementById('navigation').style.display = 'none';
    }
    /* Réaffiche le menu après l'impression */
    function afficherNav() {
      document.getElementById('navigation').style.display = 'block';
    }
  </script>
</head>
<body onbeforeprint="cacherNav()" onafterprint="afficherNav()">
  <nav id="navigation">
    <a href="#">Accueil</a> | <a href="#">Contact</a>
  </nav>
  <main>
    <h1>Contenu de la page</h1>
    <p>Seul ce contenu apparaîtra à l'impression.</p>
  </main>
</body>
</html>

Compatibilité navigateur

En 2026, onbeforeprint est pris en charge par Edge, Chrome et Firefox. Safari et Opera ont une prise en charge partielle ou limitée. Pour une compatibilité maximale, il est recommandé d'utiliser l'équivalent JavaScript window.onbeforeprint ou window.addEventListener('beforeprint', ...), qui fonctionne de façon plus fiable dans tous les contextes modernes.

Différences entre HTML 4.01 et HTML5

L'attribut onbeforeprint n'existait pas en HTML 4.01. Il a été introduit avec HTML5 dans le cadre des nouveaux attributs d'événements de fenêtre (window events).

cours precedent Retour à la Liste attribut d'événement 

    
Accueil du site

Par carabde 10 mars 2014 | Mis à jour le 03 avril 2026