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

HTMLでドキュメント印刷後にスクリプトを実行する方法【onafterprint属性】

HTMLの onafterprint 属性を使うと、ドキュメントが印刷された後（または印刷処理の実行時）にスクリプトを実行できます。この属性は、<body> 要素などに指定することで、ユーザーが印刷操作を行ったタイミングを検知し、アラート表示やログ記録などの処理を自動的に実行できます。

基本的な使い方

onafterprint 属性は、イベントハンドラとして関数名を指定するだけで簡単に利用できます。印刷ダイアログが閉じられ、印刷処理が完了した直後に、指定したJavaScriptの関数が呼び出されます。

サンプルコード

以下のコードを実行して、onafterprint 属性の動作を確認してみましょう。ページを印刷すると、印刷完了後にアラートが表示されます。

<!DOCTYPE html>
<html>
   <body onafterprint = "display()">
      <script>
         function display() {
            alert("Success!");
         }
      </script>
   </body>
</html>

補足：addEventListener を使った方法

HTML属性の代わりに、JavaScript側で window.addEventListener("afterprint", ...) を使って同じイベントを捕捉することもできます。こちらの方法なら、HTMLとJavaScriptを分離でき、コードの保守性が向上します。

window.addEventListener("afterprint", function() {
  alert("Success!");
});

対応ブラウザについて

onafterprint イベントは Firefox で古くからサポートされており、Chrome や Safari でも比較的新しいバージョンから利用可能になっています。また、関連イベントとして、印刷前に処理を実行できる onbeforeprint 属性も用意されています。両者を組み合わせれば、印刷前後で柔軟な処理を実装できます。

  1. HTMLのonratechange属性で再生速度が変わるたびにスクリプトを実行する方法

    HTMLでは、onratechange属性を使用することで、動画や音声の再生速度が変更されるたびに指定したJavaScriptのスクリプトを実行できます。この属性は、ユーザーが再生速度を変更した瞬間を検知したい場合に非常に便利です。onratechange属性の基本的な使い方onratechange属性は、<video>要素や<audio>要素に設定でき、playbackRateプロパティの値が変化したタイミングでイベントが発生します。以下のコード例では、スライダー（レンジ入力）で動画の再生速度を変更すると、その都度現在の再生速度が画面に表示される仕組みを実装しています

  2. HTML DOM スクリプトオブジェクトとは？作成方法と主なプロパティを解説

    HTML DOM のスクリプトオブジェクト（Script Object）は、HTML ドキュメント内の <script> 要素を表すオブジェクトです。JavaScript を使って動的に script 要素を生成・操作することで、ページの読み込み後に外部スクリプトを読み込んだり、コードを実行したりできます。 スクリプトオブジェクトの作成方法 構文 スクリプトオブジェクトを作成するには、document オブジェクトの createElement() メソッドを使用します。構文は以下の通りです。 document.createElement(SCRIPT); このメソッドは新しい &