Bir önceki yazıda HTML yönlendirme işleminin nasıl yapıldığını yazmıştık. Bu yazıda JavaScript ile sayfayı yönlendirme işlemini yapacağız. Yönlendirme işlemini yapmadan önce yönlendirme için hangi kod neden kullanılıyor öncelikle onu inceleyelim.
JavaScriptte URL adreslerini temsil için Location arayüzü kullanılır. Location üzerinde yapılan tüm değişiklikler hem döküman (document) hem de pencere (window) üzerinde etkilere oluşturur. 31
Konum bilgisine document.location veye window.location yazarak ulaşılabilir. Bu salt okunur bir nesnedir. location nesnesi yerine location.href nesnesi kullanılması daha doğru olur. Fakat location yazsak da sorunsuz olarak çalışmaya devam edecektir.
location.href yada location nesnesine bir URL değeri girdiğimizde location.assign() metodu çağrılmış gibi belgeyi yükler. Aslında location.href yazmak yerine location.assign(URL) yazmak daha doğru olacaktır.
Örnek 1: location yazarak yönlendirme
1 2 3 4 5 6 7 8 9 | <!-- Süresiz olarak yönlendirme --> <script> function yonlendir(){ window.location.href="https://www.yazilimbilisim.net"; } yonlendir(); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Yazılım Bilişim</title> </head> <body> <h1>Pencere yüklendiğinde yönlendirilecek</h1> <script> function yonlendir(){ window.location.href="https://www.yazilimbilisim.net"; } window.onload=yonlendir; </script> </body> </html> |
Örnek 2: JavaScript Süreli Yönlendirme Kodu
1 2 3 4 5 6 7 8 | <script> setTimeout(function(){ window.location.assign("https://www.yazilimbilisim.net"); //3 saniye sonra yönlenecek }, 3000); </script> |
yada
1 2 3 4 5 6 7 8 | <script> setTimeout(function(){ window.location="https://www.yazilimbilisim.net"; //3 saniye sonra yönlenecek }, 3000); </script> |
Örnek 3: location.assign() yazarak yönlendirme
1 2 3 4 5 6 7 8 | <script> function yonlendir(){ window.location.assign("https://www.yazilimbilisim.net"); } window.onload=yonlendir; </script> |
Örnek 4: body onload
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Yazılım Bilişim</title> </head> <body onload="yonlendir()"> <script> function yonlendir(){ window.location.assign("https://www.yazilimbilisim.net"); } </script> </body> </html> |
1 Yorum