HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのonafterprintイベント属性とは？使い方とサンプルコードを解説

onafterprintイベント属性とは

HTMLのonafterprintイベント属性は、ページの印刷が開始されたとき、または印刷ダイアログボックスが閉じられたときに発生するイベント属性です。この属性を利用することで、印刷操作の直後に特定のスクリプト（JavaScript）を実行できます。

例えば、「ユーザーが印刷を完了した後にページの背景色を変更する」「印刷後にお礼のメッセージを表示する」といった処理を実装したい場合に活用できます。

基本構文

onafterprintイベント属性の基本的な記述方法は以下のとおりです。

<tagname onafterprint="script"></tagname>

タグ名に onaftterprint 属性を指定し、値として実行したいスクリプトを記述します。通常は <body> 要素に対して設定するのが一般的です。

実際の使用例

それでは、HTML onafterprintイベント属性の具体的なサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
        padding: 20px;
    }
    p {
        font-size: 1.1rem;
    }
</style>
</head>
<body onafterprint="get()">
<h1>HTML onafterprint Event Attribute Demo</h1>
<p>ダミーテキストを含む段落（p要素）です。</p>
<p style="color:#db133a;">このドキュメントを印刷してみてください。</p>
<div class="show"></div>
<script>
    function get() {
        document.body.style.background = "lightblue";
    }
</script>
</body>
</html>

コードの解説

  • <body onafterprint="get()">：body要素にonafterprintイベント属性を設定し、印刷関連の操作が行われたときにget()関数を呼び出します。
  • get()関数：印刷後にページの背景色を「lightblue」に変更する処理を行います。

実行結果

上記のコードをブラウザで開くと、オレンジから黄色へのグラデーション背景のページが表示されます。

次に、キーボードの Ctrl + P（Macの場合は Cmd + P）を押して印刷ダイアログを表示し、印刷を実行またはキャンセルしてダイアログを閉じてみてください。

すると、onafterprintイベントが発火し、get()関数が実行されてページの背景色が水色（lightblue）に変化することが確認できます。

対応ブラウザと注意点

onafterprintイベント属性は、Chrome、Firefox、Edge、Safariなど主要なブラウザでサポートされています。なお、類似のイベントとして、印刷ダイアログが表示される前に発火するonbeforeprintイベント属性もあります。両者を組み合わせることで、印刷前と印刷後でそれぞれ異なる処理を実行できます。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード