prototürk.com sayfa geçişleri
Merhaba arkadaşlar, şu anda içinde bulunduğumuz internet sitesinde sayfa geçişleri hangi metotla yapılıyor. Yotube benzeri bir sayfa geçişi var. En tepedeki loading bar gib... Nasıl yapıldığına ilişkin video vs. varsa atabilirseniz sevinirim..
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (5)
Şimdi Tayfun Hoca php ile bir kontrol yapmış sayfa gelen istek ajax (XMLHttpRequest) isteği ise sadece dom beli bir kısmını veriyor ve gelen ajaxdaki değeri
class'ı content olan divin içine yazdırıp tarayıcının pushState function ile sayfa yenilenmeden url değiştiriyor mantık bu kadar basit aşağıdaki örnekle ne dediğimi daha iyi anlarsın
<script>
function page_change(url,page){
fetch(url)
.then(res=>res.text())
.then(res=>{
$('body').html(res)
window.history.pushState(null,null,page);
})
}
page_change('https://prototurk.com/soru/363-javascript-sayfa-yenilenince-dizi-icerisindeki-veriler-siliniyor','deneme');
</script>
valla yoğunum dostlar ama bu iki konuda da yakın zamanda video çekeceğim söz :) bu sayfa geçişleri için kullandğım fonksiyon şöyle bir şey;
function request(url, container, elem, menu, end, hide, hist) {
NProgress.start();
$.ajax({
url: SITE_URL + url,
beforeSend: function (request) {
if (hide) {
request.setRequestHeader("hide", hide);
if (hist) request.setRequestHeader("history", true);
}
},
success: function (response) {
if (elem) {
if ($(elem).data('remove')) {
$($(elem).data('remove')).removeClass('active');
}
}
if (elem && menu) {
$(menu).removeClass('active').filter(elem).addClass('active');
}
$(container).html(response);
reloadAjaxElements();
if (hist) {
$('a[href="' + SITE_URL + url + '"]').closest('ul').find('li').removeClass('active');
$('a[href="' + SITE_URL + url + '"]').parent('li').addClass('active');
}
Prism.highlightAll();
if (end !== true) {
var data = url + '||' + container;
if (hide) data += '||' + hide;
history.pushState(data, null, SITE_URL + url);
}
$('.popup').remove();
$('.full-container').removeClass('passive');
NProgress.done();
}
});
}
bunu derste daha net açıklayacağım yine de fikir olması adına :)
@redline hocamız yoğun sanırım görse bence kesin cevaplar :)
