Çözüldü HTML sayfa değiştirmeden içerik değiştirme

Tavuk Tantuni Seven · 29 Ağustos 2023

HTML ile bir site kodluyorum, bayağı ilerledim ama bir yerde takıldım. Bir linke tıklayınca başka bir sayfaya gitmeden içerik değiştirmek istiyorum. Yardım eder misiniz?

Zanen · 29 Ağustos 2023

HTML Link Verme

Web sayfanızdan aynı sayfa içinde ya da başka bir sayfaya bağlantı (link) verme. Örneklerle kullanım şekilleri.

notpast.com

İçeriğe bağlantı verme başlığından yapabilirsin.

Tavuk Tantuni Seven · 29 Ağustos 2023

Teşekkürler

Nizel G · 29 Ağustos 2023

Baştan belirteyim. Gösterdiğin sayfanın tarayıcı geçmişinde görünmesi için tarayıcıya elle url güncellemesi yapabilirsin. Böylece tarayıcı içeriği kendisi yüklemese de geçmişe link yazar ve sayfa geçmişte görünür. Bunun metodu window.history.pushState().

History: pushState() method - Web APIs | MDN

The pushState() method of the History interface adds an entry to the browser's session history stack.

developer.mozilla.org

Şimdi, basit örnek vereceğim ama bu sistemi geliştirerek sayfadaki sadece tıklamayla alakalı yerleri de değiştirebilirsin. Örneğin solda menü vardır, içeriği güncellersin gibi.

İçerik güncellenecek kısmı div içine almalısın.

HTML:

<body>
<div id="icerik">
<p>içerik buraya</p>
</div>

<a>'ya href'in yanında bir de fonksiyon vereceğiz.

HTML:

<a href="#" onClick="sayfayiGuncelle('http://localhost/index2.html')" />

Böylece linke tıkladığımızda kendi belirlediğimiz fonksiyon çağırılacak.

Kendi belirlediğimiz fonksiyonda da ilgili sayfanın içeriğini çekip sayfanın üzerine yazacağız. Bunu yaparken tarayıcının sayfa için gösterdiği URL'si değişmeyecek ve yüklenme animasyonu olmayacak.

JavaScript:

<script id="sayfayenileme">
function sayfaGuncelle(url) {
fetch(url)
.then(response => response.text())
.then(sayfa => {
document.getElementById('icerik'.innerHTML = sayfa;
}
}
</script>

Temelde işlem bu kadar. Ama tabii ki catch bloğu içine alarak, sayfayı yüklemeden önce sayfa içeriğine yükleniyor yazarak ve URL değiştirme fonksiyonunu da ekleyerek geliştirilebilir.

Tavuk Tantuni Seven · 29 Ağustos 2023

Size de teşekkür ederim

Tarık Can LP · 1 Eylül 2023

javascript ajax ile yapabilirsin. Eğer çekeceğin veri dinamik bir veri olacaksa bunun yanında php'de kullanman gerekiyor. Sadece sayfa içeriği çekeceksen sayfa değişmeden ajax ya da XMLHttpRequest kulanabilirsin.

Tavuk Tantuni Seven · 1 Eylül 2023

Teşekkür ederim çözümü JS ile yaptım

Çözüldü HTML sayfa değiştirmeden içerik değiştirme

Ayrıntılı düzenleme

Tavuk Tantuni Seven

Centipat

Zanen

HTML Link Verme

Zanen

Centipat

HTML Link Verme

Tavuk Tantuni Seven

Centipat

Nizel G

Megapat

History: pushState() method - Web APIs | MDN

Tavuk Tantuni Seven

Centipat

Tarık Can LP

Kilopat

Tavuk Tantuni Seven

Centipat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz