ブログに楽しさを加える：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.tblstudio.cn/posts/default/fun-with-js-dynamic-title