logo oujood
🔍

HTML attribut d'événement onbeforeprint

Exécutez un script JavaScript au moment exact où l'utilisateur lance une impression — avant que la fenêtre de dialogue s'ouvre.

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 — dès que l'utilisateur lance une impression, mais avant que la fenêtre de confirmation n'apparaisse à l'écran.

Il réagit aussi lors d'un aperçu avant impression : le script s'exécute dès que le navigateur prépare l'affichage de prévisualisation.

Usages courants : masquer des éléments inutiles à l'impression, charger une feuille de style dédiée, ou afficher un message de confirmation au bon moment.

astuceAstuce : onbeforeprint s'utilise presque toujours avec onafterprint, qui se déclenche 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

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 : masquer un élément avant impression

La barre de navigation est cachée automatiquement avant impression, puis réaffichée après — avec onafterprint en complément. Le menu n'apparaît pas 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. Pour une meilleure fiabilité, préférez l'équivalent JavaScript window.addEventListener('beforeprint', ...), qui fonctionne de façon plus homogène selon les contextes.

Différences entre HTML 4.01 et HTML5

L'attribut onbeforeprint n'existait pas en HTML 4.01. Il a été introduit avec HTML5 parmi les 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 29 avril 2026