History obyekti

History API brauzer seanslari tarixi bilan ishlash imkonini beradi.

Siz quyidagilarni qila olasiz:

Move backward
Move forward
Add new history entries
Joriy yozuvni o‘zgartirish

History obyekti

History API ga window.history obyekti bilan kirish mumkin.

history obyekti oyna prefiksisiz yozilishi mumkin.

Eng keng tarqalgan usullar quyidagilardir:

history.back() — brauzerda "orqaga" tugmasini bosish bilan bir xil
history.forward() - brauzerda oldinga bosish bilan bir xil

History obyekti metodlari

Metod	Tavsif
back()	Seans tarixidagi oldingi yozuvni yuklaydi
forward()	Seans tarixidagi keyingi yozuvni yuklaydi
go()	Joriy yozuvga nisbatan yozuvni yuklaydi
pushState()	Seans tarixiga yangi yozuv qo‘shadi
replaceState()	Joriy tarix yozuvini o‘zgartiradi

Seanslar tarixi bo‘ylab harakatlanish uchun back(), forward() va go() tugmalaridan foydalaning.

Yangi sahifa yuklamasdan yangi tarix yozuvini yaratish uchun pushState()’dan foydalaning.

Yangi sahifani yuklamasdan joriy yozuvni o‘zgartirish uchun replaceState() dan foydalaning.

Foydalanuvchi boshqa tarix yozuviga o‘tishini aniqlash uchun popstate hodisasidan foydalaning.

History obyekti xususiyatlari

Xususiyat	Tavsif
length	Tarixdagi yozuvlar sonini qaytaradi
state	Joriy tarix yozuvining holatini qaytaradi
scrollRestoration	O‘tkazishni tiklash harakatini oladi yoki o‘rnatadi

Eslatma!

Foydalanuvchi maxfiyligini himoya qilish uchun JavaScript-ning tarix obyektiga kirishiga cheklovlar mavjud.

Maxfiylik sababli JavaScript brauzer tarixida saqlangan URL manzillarini o‘qiy olmaydi.

history.back() metodi

history.back() usuli sessiya tarixidagi oldingi sahifani yuklaydi.

Bu brauzerning Orqaga tugmasini bosish bilan bir xil.

Misol

history.back() tarix ro‘yxatidagi oldingi URL manzilni yuklaydi:

Esda tuting: window prefiksini tushirib qoldirish mumkin:

Yuqoridagi kodning chiqishi quyidagicha bo‘ladi:

O‘zingiz sinab ko‘ring »

history.forward() metodi

history.forward() usuli sessiya tarixidagi keyingi sahifani yuklaydi.

Bu brauzerning "Forward" tugmasini bosish bilan bir xil.

Misol

history.forward() tarix ro‘yxatidagi keyingi URL’ni yuklaydi.

<button onclick="history.forward()">Go Forward</button>

Yuqoridagi kodning chiqishi quyidagicha bo‘ladi:

O‘zingiz sinab ko‘ring »

history.go() metodi

history.go() usuli sessiya tarixidan ma’lum bir sahifani yuklaydi.

Argument brauzerga joriy sahifadan qancha qadam o‘tish kerakligini aytadi.

Misol

Go back two pages:

Yuqoridagi kodning chiqishi quyidagicha bo‘ladi:

O‘zingiz sinab ko‘ring »

Misol

Bir sahifa oldinga o‘tish:

<button onclick="history.go(1)">Go Forward</button>

Yuqoridagi kodning chiqishi quyidagicha bo‘ladi:

O‘zingiz sinab ko‘ring »

Negative numbers move backward.

Positive numbers move forward.

history.go(0) reloads the current page.

history.back() history.go(-1) bilan bir xil natija beradi.

history.forward() history.go(1) bilan bir xil natija beradi.

history.length xususiyati

history.length xususiyati sessiya tarixidagi yozuvlar sonini qaytaradi.

Misollar

let length = window.history.length;

window prefiksini tushirib qoldirish mumkin:

let length = history.length;

O‘zingiz sinab ko‘ring »

Joriy sahifa raqamga kiritilgan.

history.state xususiyati

history.state xususiyati joriy tarix yozuvi bilan bog‘liq holat ma’lumotlarini qaytaradi.

Misol

let state = history.state;

O‘zingiz sinab ko‘ring »

history.state qiymati history.pushState() yoki history.replaceState() chaqirilmaguncha null bo‘ladi.

Brauzer tarixini o‘zgartirish

History API brauzer tarixidagi yozuvlarni ham qo‘shishi yoki almashtirishi mumkin.

Bu butunlay yangi hujjatni yuklamasdan sahifa mazmunini o‘zgartiradigan ilovalar uchun foydalidir.

Ikki usul quyidagilardir:

history.pushState() - adds a new history entry
history.replaceState() - replaces the current history entry

history.pushState() metodi

history.pushState() usuli sessiya tarixiga yangi yozuv qo‘shadi.

Sintaksis

history.pushState(state, "", url)

Misol

let state = {name:"example", page: 2};
let url = "page2.html";

history.pushState(state, "", url);

O‘zingiz sinab ko‘ring »

Misol URLni page2.html ga o‘zgartiradi va yangi tarix yozuvini qo‘shadi.

U serverdan page2.html faylini yuklamaydi.

Holat argumentida siz kirish bilan bog‘liq har qanday ma’lumotlarni saqlashingiz mumkin.

Ikkinchi dalil ("") tarixiy sabablarga ko‘ra mavjud va odatda bo‘sh.

Ixtiyoriy url argumenti joriy sahifa bilan bir xil kelib chiqishi kerak.

Yangi sahifa yuklanmaydi

history.pushState() metodi yangi sahifani yuklamaydi.

U brauzer tarixiga URL va state obyektini o‘z ichiga olgan yangi yozuv qo‘shadi.

Agar sahifa mazmuni o‘zgarishi kerak bo‘lsa, JavaScript uni alohida o‘zgartirishi kerak location.href = "page2.html"; kabi holat bilan

history.replaceState() metodi

history.replaceState() metodi joriy tarix yozuvini o‘zgartiradi.

history.pushState()’dan farqli ravishda, u yangi tarix yozuvini yaratmaydi.

Bu brauzer tarixiga boshqa yozuv qo‘shmasdan joriy URL manzilini o‘zgartiradi:

Sintaksis

history.replaceState(state, "", url)

Misol

let state = {name:"example", page: 2};
let url = "page2.html";

history.replaceState(state, "", url);

O‘zingiz sinab ko‘ring »

Yangi sahifa yuklanmaydi

history.replaceState() metodi yangi sahifani yuklamaydi.

U joriy tarix yozuvini, jumladan URL va state obyektini o‘zgartiradi.

Agar sahifa mazmuni o‘zgarishi kerak bo‘lsa, JavaScript uni alohida o‘zgartirishi kerak location.href = "page2.html"; kabi holat bilan

popstate hodisasi

popstate hodisasi faol tarix yozuvi o‘zgarganda sodir bo‘ladi.

Bu odatda foydalanuvchi brauzerning Orqaga yoki Oldinga tugmasini bosganda sodir bo‘ladi.

Misol

window.addEventListener("popstate", function(event) {
myDisplayer("Page changed");
});

Agar tarix yozuvida holat ma’lumotlari bo‘lsa, uni event.state saytidan olish mumkin:

Misol

window.addEventListener("popstate", function(event) {
  if (event.state) {
    myDisplayer(event.state.page);
  }
});

Eslatma: pushState() yoki replaceState() chaqirilganda popstate hodisasi ishga tushmaydi.

History API’ning oddiy misoli

Quyidagi misol yangi sahifani yuklamasdan URL manzilini o‘zgartiradi.

Bundan tashqari, foydalanuvchi Orqaga yoki Oldinga tugmasini bosganida ko‘rsatilgan tarkibni tiklaydi.

Misol

<button onclick="showPage('home')">Home</button>
<button onclick="showPage('about')">About</button>

<p id="demo">Home</p>

<script>
function showPage(page) {
  myDisplayer(page);
  history.pushState({page: page}, "", "?page=" + page);
}

window.addEventListener("popstate", function(event) {
  if (event.state) {
    myDisplayer(event.state.page);
  }
});
</script>

O‘zingiz sinab ko‘ring »

Aylantirish (scroll) holatini tiklash

Brauzerlar odatda foydalanuvchilar orqaga yoki oldinga harakat qilganda aylantirish holatini tiklaydi.

History.scrollRestoration xususiyati bu xatti-harakatni boshqarishi mumkin.

Misol

Disable automatic scroll restoration:

history.scrollRestoration = "manual";

Mumkin bo‘lgan qiymatlar:

"auto" - brauzer aylantirish (scroll) holatini tiklaydi
"qo‘lda" - dastur aylantirish pozitsiyasini boshqaradi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish