Bir web sayfası gösterilirken farklı sayfaya geçmek gerekebilir. Bunu kullanıcıya bir link vererek yapabiliriz. Böyle kullanıcı linke tıkladığında o sayfaya gider. Fakat biz eğer bunu Javascript ile yapmak istiyorsak, buradaki amaç daha farklı olabilir. Mesela bir butona tıklandığında, o anki duruma göre farklı bir sayfaya gitmek istenebilir.
Yada sayfa yüklendikten belirli bir süre sonra farklı bir web sayfasına kullanıcıyı yönlendirmek isteyebiliriz. Bu ve benzeri farklı senoryalar için Javascript bize kolay bir yöntem sunuyor.
Javascript Sayfa Yönlendirme
Javascript sayfa yönlendirme işlemi için window.location.href değişkeninin değerini değiştirmek gerekiyor. window.location sayfa adresi ile ilgili bilgileri tutan bir nesnesidir. Bu bilgiler içerisinde sayfa adresini href özelliği tutar. Biz yönlendirme yapmak istediğimiz sayfayın adresini (url) bu sayfaya atadığımızda, o sayfaya yönlendirme olacaktır. Bu değer bir stringdir. Örnek kullanımı aşağıdaki gibidir.
document.location.href = "https://netbilio.com";
// netbilio.com adresine yönlendirme yapılır.Javascript İle Berlirli Bir Süre Sonra Sayfa Yönlendirme
Eğer sayfa yüklendikten bir süre sonra sayfayı farklı bir adrese yönledirmek istiyorsak bunu Javascript ile kolaylıkla yapabiliriz. Bu genellikle bir mesaj verildikten sonra farklı bir sayfaya geçmek için kullanılan bir yöntemdir. Bunun için setTimeout metodunu kullanacağız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
const yonlendir = (url, sure) => {
setTimeout(() => {
window.location.href = url;
}, sure);
}
window.addEventListener("load", yonlendir("https://netbilio.com", 2000))
</script>
<title>Document</title>
</head>
<body>
<h1>Lorem ipsum dolor</h1>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque, omnis expedita! Error vero maxime qui velit, dolorem totam quas!</div>
</body>
</html>Yukarıdaki kodları yazarak html olarak kayıt ettikten sonra, sayfayı açtığınızda yaklaşık iki saniye sonra sayfa https://netbilio.com adresine yönlendirilecektir.
Burada yaptığımız işlemler sırası ile şunlar.
- yonlendir fonksiyonu url ve sure adında iki parametre alıyor. url yönlendirme yapılacak adres bilgisini tutuyor. sure ise kaç milisaniye sonra yönlendirme yapılacağını bilgisini alıyor.
- setTimeout fonksiyonu içerisinde window.location.href değişkenine url değerini atıyoruz. Ve ayrıca ikinci parametre olarakda sure değişkenini veriyoruz.
- window.addEventListener metodunu çağırarak load eventini ekliyoruz ve yapılacak işlem olarak da parametreleri ile birlikte yonlendir fonksiyonunu giriyoruz.
Sayfa yüklendiğinde onload eventi çağrılıyor. Bu event yonlendir fonksiyonunu çağırıyor ve yonlendir fonksiyonu içerisinde setTimeout çağrılarak orada yönlendirme yapılıyor.
Javascript İle Butona Tıklandığında Sayfayı Yönlendirme Nasıl Yapılır?
Şimdi diğer bir uygulamada bir butona tıklandığı zaman sayfayı nasıl yönlendireceğimizi görelim. Yönlendirme işlemi yine window.location.href değişkenine bir değer atayarak yapılıyor tek fark çağırmak için butonun onClick eventini kullanmamız olacak.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
const yonlendir = (url) => {
document.location.href = url;
}
</script>
<title>Document</title>
</head>
<body>
<h1>Lorem ipsum dolor</h1>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Itaque, omnis expedita!
Error vero maxime qui velit, dolorem totam quas!
</div>
<br />
<button onClick="yonlendir('https://netbilio.com')">Netbilio.com</button>
</body>
</html>
Butona tıkladığımızda onClick eventi çalışır ve url parameteresi ile birlikte yonlendir fonksiyonunu çağırır. Bu fonksiyon içerisinde document.location.href değerine gönderdiğimiz url bilgisi atanır. Bundan sonra Javascript gerekli yönlendirmeyi yapar.
Sonuç
Javascript ile sayfa yönlendirmek için document.location.href değişkenine yönlendirilecek sayfanın adresinin atanması yeterli olacaktır.
Javascript ile ilgili sorularınızı bize yorumlardan iletebilirsiniz.