Yücel Alkan

Sekme Değişikliğinde Sayfa Başlığını Değiştirme

Merhabalar. Bugün yeni bir javascript uygulaması ile beraberiz. İnternette gezinirken denk geldiğinizi düşünüyorum. Bazı sitelerde gezindikten sonra farklı bir sekmeye geçtiğiniz zaman site başlığı yani Title'ın değiştiğini görürsünüz. Kullanıcıların oldukça dikkatini çeken bu uygulamanın yapımına birlikte göz atalım.

Sayfa başlığının normal hali

Sekme Değişince Sayfa Başlığını Değiştirme

Farklı bir sekmeye geçildiği zaman sayfa başlığının değişmesi

Sekme Değişince Sayfa Başlığını Değiştirme

Öncelikle boş bir html sayfası açıyoruz ve head tagları arasına sayfa başlığımızı yani title'ımızı ekliyoruz. Ben "Blog Sitem" ifadesini ekledim. Siz istediğiniz ifadeyi ekleyebilirsiniz.

<title>Blog Sitem</title>

Ardından head tagları arasına script tagı açıyoruz ve sırasıyla aşağıdaki kodları ekliyoruz. 

1. Öncelikle sayfamızın geçerli başlığını bir değişkene aktarıyoruz. Bu işlemi yapmazsak sitemizin geçerli başlığına ait bilgi kaybolacaktır.

var baslik = document.title;

2. Ardından yeni bir değişken tanımlayıp, kullanıcılar sayfamızı terk ettiğinde title'a yazılacak olan ifadeyi içerisine aktarıyoruz. Ben esprili bir ifade ekledim, siz istediğinizi yazabilirsiniz.

var yeniBaslik = "Hoop! Beni Unutma :)";

3. Gelelim kullanıcıların sayfamızı terk etmesi işlemine. Bunun için JavaScript'te yer alan onblur olayını kullanacağız. Kullanıcılar sayfamızı terk ettiği zaman yeniBaslik değerimizi yani içerisinde "Hoop! Beni Unutma :)" değerini sayfa başlığına aktarıyoruz.

window.onblur = function(){
    document.title = yeniBaslik;
}

4. İşlemimiz henüz bitmedi. Bu haliyle bırakırsak sayfamızı terk eden ziyaretçi sayfamıza yeniden döndüğünde başlık değişmeyecektir. İşte bu aşamada, kullanıcının tekrar sayfamıza gelmesini olayını halledeceğiz. Bunun için JavaScript'te yer alan onfocus olayını kullanacağız. İlk adımda hatırlarsanız baslik değişkenine sayfamızın geçerli başlığını almıştık. İşte kullanıcı sayfamıza geri geldiğinde bu değeri tekrar sayfa başlığına aktaracağız.

window.onfocus = function()
{
    document.title = baslik;
}

Uygulamamız bu kadar. Dilerseniz adım adım yaptığımız işlemleri bir araya getirelim. Aşağıdaki kodları sayfamızda yer alan head tagları arasına eklememiz yeterli olacaktır. Tabi ki ifadeleri düzenlemeyi unutmayın.

<title>Blog Sitem</title>
    
<script type="text/javascript">
        
    var baslik = document.title;
    var yeniBaslik = "Hoop! Beni Unutma :)";

    window.onblur = function(){
        document.title = yeniBaslik;
    }

    window.onfocus = function()
    {
        document.title = baslik;
    }
        
</script>

Soru, görüş ve önerilerinizi yorum olarak bırakabilirsiniz.
Bir sonraki çalışmada görüşmek üzere İnşallah, hayırlı çalışmalar.

Yorumlar
Murat (05 Ocak 2023 - 14:52)
Müşterimizin talebi vardı. Pratik şekilde anlatmışsınız. Teşekkürler :)
Cevapla
Yorum Yapın