ブログに楽しさを加える：JSを使ってウェブページのタイトルを変更する

最近非常クールな JavaScript コードを作成しました。自分のブログで試してみたところ、効果は素晴らしかったです！
もしあなたのブログがカスタム JS をサポートしているなら、試してみてください。ページがより生き生きとして面白くなります。

それは何ができるの？#

ユーザーが他のタブに切り替えたり、ブラウザを最小化したりすると、タイトルが自動的に「あまり遠くに行かないでね…」に変わり、ユーザーを「引き留め」ます。そして、ユーザーがページに戻ると、タイトルが熱心に「やった、戻ってきた！ヾ (・ω・`) o」と表示され、2 秒後に元のタイトルに自動的に戻ります。

クールですよね？コードを見てみましょう！

コード実装#

// 元のタイトルを定義
const originalTitle = document.title;
let timeoutId; // タイマーIDを保存するための変数

// ページの可視性の変化を監視
document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        // ページが見えないときにタイトルを変更
        document.title = "あまり遠くに行かないでね...";
        // 可能性のあるタイマーをクリア
        clearTimeout(timeoutId);
    } else {
        // ページが見えるときに、2秒遅れてタイトルを変更
        document.title = "やった、戻ってきた！ヾ (•ω•`)o";
        // 2秒後に元のタイトルに戻す
        timeoutId = setTimeout(() => {
            document.title = originalTitle;
        }, 2000);
    }
});

技術的な分解#

1. `document.title`#

これはシンプルで強力なプロパティで、ウェブページのタブに表示されるタイトルを読み取ったり変更したりするために使用できます。動的に値を設定することで、タイトルを「生き生きとさせる」ことができます。

2. `document.hidden`#

このプロパティはブラウザの Visibility API から来ており、ページが不可視状態にあるかどうかを検出するために使用されます。ユーザーがタブを切り替えたり、ブラウザを最小化したりすると、trueに変わります。ユーザーが戻ってくると、再びfalseに戻ります。

3. `visibilitychange`イベント#

これはページの可視性が変化したときにトリガーされるイベントで、ユーザーの行動を「検出する」機能を実現するのに非常に適しています。

4. `setTimeout`と`clearTimeout`#

setTimeoutは、ユーザーが戻ってきたときにタイトルの復元操作を数秒遅らせることができ、より自然に見えます。
clearTimeoutは、余分な遅延操作が蓄積されないようにし、ロジックの衝突を避けるために使用されます。

特徴と欠点#

利点：
- 実装ロジックがシンプルで、コードが直感的です。
- グローバル変数を通じて状態を直接管理し、機能を迅速に完了できます。
欠点：
- グローバル変数originalTitleとtimeoutIdを使用しているため、他のコードと衝突する可能性があります。
- イベントリスナーをクリーンアップしていないため、ページがアンロードされるときに潜在的なメモリリークが発生する可能性があります。

改良版：コメント欄の liuzhen932 からの提案#

liuzhen932は、コードを即時実行関数にカプセル化し、イベントクリーンアップメカニズムを追加した、よりモジュール化されたバージョンを提案しました。以下は改良後のコードです：

(function () {
  "use strict";

  // 復元用に元のタイトルを保存
  const originalTitle = document.title;

  // 複数のタイマーの衝突を防ぐためにタイマーIDを保存
  let timeoutId;

  // ページの可視性の変化を処理するロジック
  function handleVisibilityChange() {
    // 前回の可能性のあるタイマーをクリア
    clearTimeout(timeoutId);

    if (document.hidden) {
      // ページが見えないときにタイトルを設定
      document.title = "あまり遠くに行かないでね...";
    } else {
      // ページが見えるときに、まずは通知タイトルを設定
      document.title = "やった、戻ってきた！ヾ(•ω•`)o";
      // 2秒後に元のタイトルに復元
      timeoutId = setTimeout(() => {
        document.title = originalTitle;
      }, 2000);
    }
  }

  // ページがアンロードされる前のクリーンアップロジック
  function beforeUnloadListener() {
    // メモリリークを避けるために可視性変化のイベントリスナーを削除
    document.removeEventListener("visibilitychange", handleVisibilityChange);
  }

  // ページの可視性変化のイベントをバインド
  document.addEventListener("visibilitychange", handleVisibilityChange);

  // ページがアンロードされる前に関連するイベントリスナーを削除
  window.addEventListener("beforeunload", beforeUnloadListener);
})();

改良点#

モジュール化設計：
- 即時実行関数を使用して、グローバル変数の汚染を避けます。
イベントクリーンアップ：
- ページがアンロードされるときにvisibilitychangeリスナーを削除し、メモリリークのリスクを減らします。
簡潔性：
- 三項演算子と論理短絡の書き方を使用して、コードをよりコンパクトにします。

実際にどこで使う？#

私もわかりませんが、とても面白いです。これはあなたのブログの隠し要素にもなりますし、何かを思い出させることもできます。あなたがどのように使うか次第です！

small ヒント#

適度に使用：タイトルが頻繁に変わると、非常に煩わしく感じるかもしれませんので、トリガーの頻度を適切に制御してください。
互換性の問題：現代のブラウザはほぼすべて Visibility API をサポートしていますが、ユーザー層が古いブラウザを使用している場合は、互換性の処理を行うのが最善です。

このようなコードは今後も共有していくつもりですので、皆さん自由に活用してください。もしよければ、ブログのリンクをコメント欄に残していただければ、見に行くのも悪くありません（

この記事は Mix Space によって xLog に同期更新されました。
元のリンクは https://ling.crashvibe.cn/posts/default/fun-with-js-dynamic-title です。