他のサイトに移ったらサイトのタイトルを変える

この記事は「大分高専 Advent Calendar 2024」11日目の記事です．

はじめに

これはニュージーランドについて調べているときに出会ったサイトです．

このサイトがすごいと思ったのは，このサイトを開いたまま他のサイトに行くとタイトルが変わって，「Come back!」と表示されるところです．ぜひ試してみてください．
今回はこの機能をjavascriptで実装してみたいと思います．

実装してみる

他のサイトに移った時，タイトルが変わるという機能を実装したいです．
まず，タイトルを変えるには以下のようにtitle要素を取得し，textContentの値を変更すれば良いです．

const title = document.querySelector('html title');
// 要素の取得
title.textContent = "ココに内容";
// 内容の変更

問題は他のサイトに移ったことをどうやって検知するか．
ここで登場するのが，blurイベントです．

このイベントをWebページ全体（body要素）につけておくことで，そのサイトがフォーカスを失ったとき，つまり他のサイトにフォーカスが移ったときにこのイベントが呼ばれます．逆に，フォーカスを受け取ったときにはonfocusイベントが呼ばれます．

    let body = document.querySelector('html body');
    body.onblur = () => {   
        title.textContent = "(｡-ˇ_ˇ-｡)";
    }
    body.onfocus = () => { 
        title.textContent = "ヾ(o ･∀･)ﾉwelcome back";
    }

実際の動作がこちら．

他のページに移ったときに「(｡-ˇ_ˇ-｡)」が表示されています．成功です．

おわりに

今回は，他のサイトにフォーカスが移ったときに呼び出される，onblurイベントを使って，タイトルを変えるという機能を実装しました．あまり実用性はないので，遊び心を加えたいときに使うと良いかなと思いました．
他のサイトに嫉妬してるみたいで可愛いですね．