Cara menggunakan WINDOW.HISTORY pada JavaScript

Question

Table of Contents Show

1. History Penjelajahan Browser
2. Batasan Keamanan History API HTML5
3. Objek History HTML5
4. Contoh History API
5. History Perubahan Event

Labkom99.com – History API HTML5 memungkinkan halaman menggunakan Javascript untuk memproses riwayat navigasi browser. History API HTML5 sangat berguna untuk aplikasi WEB APP dengan satu halaman. Dalam aplikasi WEB APP yang menggunakan satu halaman, kita dapat menggunakan History API HTML5 untuk membuat efek navigasi yang mirip dengan “bookmark”.

1. History Penjelajahan Browser

Riwayat penjelajahan browser adalah setumpuk grup URL. Setiap kali pengguna menjelajahi situs web, URL halaman baru akan ditempatkan di bagian atas tumpukan. Saat pengguna mengeklik tombol “kembali” di browser, penunjuk tumpukan akan berpindah ke elemen tumpukan berikutnya yang saat ini diarahkan ke elemen.

Jika pengguna mengklik tombol “maju” di browser, penunjuk tumpukan akan berpindah ke elemen sebelumnya dari elemen tumpukan yang saat ini ditunjuk. Jika pengguna mengklik tombol “kembali” dan menjelajahi halaman baru, URL elemen D di bagian atas tumpukan akan ditimpa dengan URL baru.

Berikut ini adalah contoh penelusuran tumpukan History:

https://www.labkom99.com/2020/11/belajar-html5-file-api-html5.html
https://www.labkom99.com/2020/11/belajar-html5-elemen-time-html5.html
https://www.labkom99.com/

Dalam tumpukan riwayat penjelajahan di atas, yang terakhir untuk dijelajahi adalah “https://www.labkom99.com/2020/11/belajar-html5-file-api-html5.html”. Jika pengguna mengklik tombol “kembali” di browser, penunjuk tumpukan akan berpindah ke halaman “https://www.labkom99.com/2020/11/belajar-html5-elemen-time-html5.html”.

Saat ini, jika pengguna mengklik tombol “maju” di browser, penunjuk akan berpindah ke halaman “https://www.labkom99.com/2020/11/belajar-html5-file-api-html5.html”. Tetapi jika pengguna membuka halaman baru lain selama operasi saat ini, URL halaman baru akan menimpa riwayat “https://www.labkom99.com/2020/11/belajar-html5-elemen-time-html5.html”.

Baca Juga : Belajar HTML5 File API HTML5

2. Batasan Keamanan History API HTML5

History API HTML5hanya dapat mengakses riwayat penjelajahan browser di halaman lain dengan nama domain yang sama pada halaman yang digunakan saat ini. Pertimbangan keamanan menjadi acuan penting dalam penempatan History API HTML5. Oleh karena itu, halaman WEB tidak dapat melihat riwayat penelusuran situs web lain yang dikunjungi oleh pengguna.

Demikian pula, History API HTML5 tidak mengizinkan URL halaman lain yang dikunjungi oleh pengguna untuk ditempatkan di tumpukan riwayat browser dari nama domain saat ini yang digunakan.

Baca Juga : Belajar HTML5 Elemen Time HTML5

3. Objek History HTML5

Kita dapat history mengakses riwayat penjelajahan browser melalui objek, yang merupakan objek global JavaScript ( window.history).

Objek History berisi fungsi-fungsi berikut berisi API history:

1. back()

Fungsi back() tersebut digunakan untuk memindahkan history browsing ke URL sebelumnya. Memanggil suatu fungsi back() memiliki efek yang sama seperti mengklik tombol “kembali” di browser.

2. forward()

Fungsi forward() tersebut digunakan untuk memindahkan history browsing ke URL berikutnya. Memanggil suatu fungsi forward() memiliki efek yang sama seperti mengklik tombol “maju” di browser. Fungsi ini hanya berlaku setelah fungsi back() dipanggil atau tombol “kembali” diklik. Jika penunjuk penelusuran sudah ada di URL terakhir dalam riwayat penelusuran, fungsi ini tidak akan berpengaruh apa pun.

3. go(index)

Fungsi go(index) ini akan memindahkan index riwayat penelusuran maju atau mundur sesuai dengan nilai parameter. Jika index parameternya adalah angka negatif, seperti -1, browser akan mundur melalui riwayat penelusuran. Jika index parameternya adalah angka positif, misalnya 1, browser akan bergerak maju untuk menelusuri record. Ukuran nilai Index menunjukkan berapa banyak halaman yang harus maju atau mundur.

4. pushState(stateObject, title, url)

Fungsi pushState(stateObject, title, url) ini akan mendorong URL baru ke dalam tumpukan riwayat penelusuran. Fungsi ini memiliki 3 parameter. Fungsi url yang akan mendorong URL ke tumpukan, title yang akan diabaikan oleh sebagian besar browser. Dan stateObject yang diteruskan dengan peristiwa ketika URL baru didorong ke tumpukan riwayat. Objek ini berisi data apa pun yang Anda butuhkan.

5. replaceState(stateObject, title, url)

Fungsinya replaceState(stateObject, title, url) mirip dengan fungsinya pushState(). Tetapi menggantikan elemen saat ini dalam tumpukan riwayat dengan URL baru. Elemen saat ini belum tentu merupakan elemen teratas di tumpukan. Elemen tersebut adalah elemen yang ditunjukkan oleh penunjuk saat ini.

Baca Juga : Belajar HTML5 Elemen Article Dan Elemen Aside HTML5

4. Contoh History API

Berikut beberapa contoh aplikasi History API HTML5.

Back() dan Forward ()

Pertama-tama, mari kita lihat cara memindahkan riwayat penelusuran melalui fungsi back() dan forward().

history.back(); history.forward();

Objek History adalah window turunan dari objek, jadi kode di atas juga bisa ditulis sebagai berikut:

window.history.back(); window.history.forward();

Perlu dicatat bahwa kecuali Anda telah memindahkan riwayat penelusuran ke belakang, fungsi forward() tersebut tidak tersedia.

go()

Mari kita lihat bagaimana menggunakan fungsi go() untuk mencapai efek yang sama seperti back() dan fungsi forward(). Jika Anda ingin mengambil langkah mundur dari riwayat penjelajahan, Anda dapat menggunakan:

history.go(-1);

Jika Anda ingin kembali ke 2 halaman, Anda dapat menggunakan:

history.go(-2);

Demikian pula, jika Anda ingin memajukan riwayat penelusuran. Cukup tetapkan nilai parameter ke angka positif.

history.go(1); history.go(2);

pushState()

Untuk mendorong status penjelajahan baru ke dalam tumpukan riwayat penjelajahan, Anda dapat menggunakan fungsi objek history pushState().

var state = {};
var title = "";
var url   = "next-page.html"; history.pushState(state, title, url);

Kode di atas mendorong URL baru ke dalam tumpukan riwayat penelusuran. Operasi ini juga akan mengubah alamat URL di bilah alamat browser, tetapi tidak akan menyebabkan browser melompat ke URL baru.

replaceState ()

Fungsi replaceState() ini menggantikan elemen riwayat penelusuran yang ditunjukkan oleh penunjuk tumpukan saat ini. Elemen ini belum tentu merupakan elemen teratas di tumpukan.

var state = {};
var title = "";
var url   = "another-page.html"; history.replaceState(state, title, url);

Operasi ini juga akan mengubah alamat URL di bilah alamat browser, tetapi tidak akan menyebabkan browser melompat ke URL baru.

Baca Juga : Belajar HTML5 Elemen Navigasi HTML5

5. History Perubahan Event

History API HTML5 memungkinkan anda memantau perubahan dalam riwayat penjelajahan laman. Mekanisme keamanan History API HTML5 juga efektif digunakan. Jadi anda tidak dapat memantau riwayat perubahan halaman dengan nama domain yang berbeda.

Untuk memantau perubahan dalam riwayat penjelajahan browser, Anda dapat menggunakan window objek onpopstate() untuk memonitoring. Berikut ini contoh kodenya:

window.onpopstate = function(event) {
    console.log("history changed to: " + document.location.href);
}

Fungsi Onpopstate pemrosesan event akan dipanggil setiap kali riwayat penelusuran berubah di halaman yang sama.

Baca Juga : Belajar HTML5 Elemen Header Dan Footer HTML5

Perhatikan bahwa hanya mengeklik tombol “maju” dan “kembali” di browser akan menjalankan fungsi navigasi riwayat penjelajahan yang benar back(), forward() dan go(). Ketikaonpopstate event dipanggil, Panggilan pushState() dan fungsi replaceState() tidak memicu kejadian onpopstate.

kode javascript