URL Yapısı Çözümlemesi

Görüntülenen sayfanın sahip olduğu URL yapısı bir yana, tıklanan bir bağlantıya ait URL parçalarını da ihtiyacınız olan kurgulara uygun şekilde işlemlere dahil edebilmektesiniz. Özellikle e-ticaret sayfaları ve bloglarda sıklıkla yinelenen bağlantılara özel fonksiyonlar atarken kullanabileceğiniz yöntemler için sadece ihtiyaçlarınızı net bir şekilde belirlemeniz yeterli, geri kalan işlemi birkaç satırlık JavaScript kodu ile kolaylıkla halledebilirsiniz.

URL Yapıları

Kısaca, URL yapısından¹ bahsettiğimizde değerlendirmemiz gereken alanlar ile ilgili olarak farklı şekillerde kurgulanan iki örneği inceleyebilirsiniz.

Peki, https://www.nasa.gov:1234/mission_pages/newhorizons/main/index.html?q=123#top şeklinde bir bağlantıya sahip bir sayfayı görüntülüyor isek ilgili URL parçalarını nasıl edinebiliriz?

window.location

window.location.host // www.nasa.gov:1234
window.location.hostname // www.nasa.gov
window.location.port // 1234
window.location.protocol // http
window.location.pathname // index.html
window.location.href // https://www.nasa.gov/mission_pages/newhorizons/main/index.html?foo=123#top
window.location.hash // #top
window.location.search // ?q=123

jQuery(location).attr

$(location).attr('host') // www.nasa.gov:1234
$(location).attr('hostname') // www.nasa.gov
$(location).attr('port') // 1234
$(location).attr('protocol') // http
$(location).attr('pathname') // index.html
$(location).attr('href') // https://www.nasa.gov/mission_pages/newhorizons/main/index.html?foo=123#top
$(location).attr('hash') // #top
$(location).attr('search') // ?q=123