Yandex Metrica
JavaScript İle Url Href Alma ve Href Bilgisini Değiştirme - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

JavaScript İle Url Href Alma ve Href Bilgisini Değiştirme

12.03.2022 yasinsunmaz 3730 0

HTML sayfalarımızda bir tetikleme sonucunda ya da sayfa yüklendiğinde a href bilgisini değiştirmeye ihtiyacımız olabiliyor. Java Script ile HTML'de a href bilgisini değiştirmek için örnekte iki tane url kullandım. firstHref ve secondHref adında iki tane linkimiz mevcut. Kurgumuza göre secondHref tıklandığında firstHref linkinin href bilgisini https://yasinsunmaz.com olarak değiştirmektir. Bunun için ise secondHref'e tıklandığında bu işlemi tetikleyeceğiz. Tetikleme gerçekleştikten sonra da id'si firstHref olan a hrefin href bilgisini istediğimiz şekilde değiştiriyoruz.

JS İle Url Üzerinden Href Bilgisi Alıp Kullanma

İhtiyaca göre var olan sayfamızın url bilgisi alıp istediğimiz yerde kullanabiliriz. Java Script ile url bilgisini location.href kullanarak url bilgisini alabiliriz.

Öncelikle HTML sayfamızda iki tane href ekliyoruz. Ve idleri sırasıyla firstHref ve secondHref olmalıdır. Sonrasında bu script kodunu yazdığınızda secondHref tıklandığında firstHref href bilgisi https://yasinsunmaz.com olarak değişecektir.

document.getElementById("secondHref").onclick = function() {
    document.getElementById("firstHref").href="https://yasinsunmaz.com"; 
    return false;
};

JS İle Url Üzerindeki Parametreyi Alıp Href Bilgisini Değiştirme

Bu yöntemde ise urlde istediğiniz parametreyi alarak başka href üzerinde değişlik yapabilirsiniz. params const'unu incelediğimizde bizim sayfamızın url bilgisini alıp içerisinde istenen parametre değerini arar. Sonraki aşamada ise params.param_name kısmında istediğimiz parametrenin adını yazıyoruz. Yani params'dan sonra hangi parametreyi istiyorsak onun adını yazıyoruz. Örnek vermek gerekirse, https://yasinsunmaz.com?page=1 şeklinde urlimiz olduğunu düşünelim. Buradaki page değerini almak için let value= params.page; şeklinde bir kullanım ile "1" değerini alabiliriz.

Burada da urlHref idli bir tane url eklememiz gerekiyor. Sonrasında script kodunu yazıp çalıştırdığınızda bulunduğunuz sayfadki url bilgisini alıp istediğiniz parametre değerine ulaşabilir ve bunu kullanabiliriz.

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
 });
let value = params.filenames;
if(value!=null){
document.getElementById("urlHref").href="https://yasinsunmaz.com/"+value;
}

Umarım faydalı olmuştur. İyi çalışmalar dilerim.

  • Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.

Diğer Yazılar

SASS ve SCSS Nedir? Nasıl Kullanılır?

19.06.2023 yasinsunmaz 330 0

Bu yazımda CSS'in genişletilmiş bir versiyonu olan SASS (Syntactically Awesome Style Sheets)'ı ele alacağım. CSS yazma deneyimini geliştiren ve stil tabanlı projelerde daha...

En İyi Çevrimiçi CSS Gölge Oluşturucu Araçları

26.12.2022 yasinsunmaz 305 0

Web tasarımı söz konusu olduğunda, gölgeler sayfalarınıza çok fazla derinlik ve boyut katabilir. Ama ne yazık ki, gölgeler oluşturmak biraz zor olabilir....

JavaScript Tarih Dönüştürme ve Sıralama İşlemi

07.03.2022 yasinsunmaz 1555 0

Verilerimiz bazen farklı farklı tablolar üzerinden alınarak bir araya geldiğinde anlam kazanır. Farklı tablolardan veri almamız sonucunda bazı işlemleri yapmak zor olabilir ya...

En İyi CSS Hileleri ve Oluşturucuları

30.09.2020 yasinsunmaz 1793 0

Web site tasarlarken değişik tasarımlara ihtiyaç duyulmaktadır. Tasarımlarımızı CSS ile yapıyoruz. Fakat bazı durumlarda istediğimiz sonucu alabilmek için olduk&ccedi...

Geliştiriciler İçin En İyi 13 Online JSON Araçları

19.06.2022 yasinsunmaz 1123 0

Geliştiriciler için JSON veri tepi sıkça kullanılmakta. Durum böyle olunca zaman zaman hem görsel hem de daha düzgün görünmesi iç...

Visual Studio ESLint Expected Java Script Hatası Çözümü

21.04.2019 yasinsunmaz 2966 0

Merhaba arkadaşlar bu yazımda sizlere Microsoft Visual Studio'da karşılaşabileceğiniz Error eqeqeq (ESLint) Expected '===' and instead saw '=='. hatas...

JQuery İle Data Attribute Değerini Değiştirme

08.04.2019 yasinsunmaz 2710 0

Bu yazımda HTML 5'de sıkça kullanılan data attritube özelliğindeki data değerini değiştirmeyi anlatacağım. Data attritube özelliğini HTML'deki elemanl...