Belajar HTML5 History API HTML5

Belajar HTML5 History API HTML5 – History API HTML5 membolehkan laman memakai Javascript buat mengerjakan riwayat pelayaran browser. History API HTML5 amat bermanfaat buat aplikasi Website APP dengan satu laman.

Belajar HTML5 History API HTML5

wimi5 – Dalam aplikasi Website APP yang memakai satu laman, kita bisa memakai History API HTML5 buat membuat dampak yang mendekati dengan“ bookmark”.

1. History Penjelajahan Browser

Melansir labkom99, Riwayat penjelajahan browser merupakan setumpuk URL. Tiap kali konsumen menjelajahi web website, URL laman terkini hendak ditempatkan di bagian atas gundukan. Dikala konsumen mengeklik tombol“ kembali” di browser, penanda gundukan hendak beralih ke bagian gundukan selanjutnya yang dikala ini ditunjukan ke bagian.

Baca juga : Belajar HTML5 Cepat Dan Mudah Langsung Bisa Praktik

Bila konsumen mengklik tombol“ maju” di browser, penanda gundukan hendak beralih ke bagian tadinya dari bagian gundukan yang dikala ini ditunjuk. Bila konsumen mengklik tombol“ kembali” serta menjelajahi laman terkini, URL bagian D di bagian atas gundukan hendak ditimpa dengan URL terkini.

2. Batasan Keamanan History API HTML5

History API HTML5 cuma bisa mengakses riwayat penjelajahan browser di laman lain dengan julukan daerah yang serupa pada laman yang dipakai dikala ini. Estimasi keamanan jadi referensi berarti dalam penempatan History API HTML5. Oleh sebab itu, laman Website tidak bisa memandang riwayat pencarian web website lain yang didatangi oleh konsumen.

Begitu pula, History API HTML5 tidak memperbolehkan URL laman lain yang didatangi oleh konsumen buat ditempatkan di gundukan riwayat browser dari julukan daerah dikala ini yang dipakai.

3. Objek History HTML5

Kita bisa history mengakses riwayat penjelajahan browser lewat subjek, yang ialah subjek garis besar JavaScript( window. history).

Subjek History bermuatan fungsi- fungsi selanjutnya bermuatan API history:

1. back()

Guna back() itu dipakai buat memindahkan history browsing ke URL tadinya. Memanggil sesuatu guna back() mempunyai dampak yang serupa semacam mengklik tombol“ kembali” di browser.

2. forward()

Guna forward() itu dipakai buat memindahkan history browsing ke URL selanjutnya. Memanggil sesuatu guna forward() mempunyai dampak yang serupa semacam mengklik tombol“ maju” di browser. Guna ini cuma legal sehabis guna back() dipanggil ataupun tombol“ kembali” diklik. Bila penanda pencarian telah terdapat di URL terakhir dalam riwayat pencarian, guna ini tidak hendak mempengaruhi apa juga.

3. go( index)

Guna go( index) ini hendak memindahkan index riwayat pencarian maju ataupun mundur cocok dengan angka patokan. Bila index parameternya merupakan nilai minus, semacam- 1, browser hendak mundur lewat riwayat pencarian. Bila index parameternya merupakan nilai positif, misalnya 1, browser hendak beranjak maju buat menelusuri record. Dimensi angka Index membuktikan berapa banyak laman yang wajib maju ataupun mundur.

4. pushState( stateObject, title, url)

Guna pushState( stateObject, title, url) ini hendak mendesak URL terkini ke dalam gundukan riwayat pencarian. Guna ini mempunyai 3 patokan. Guna url yang hendak mendesak URL ke gundukan, title yang hendak diabaikan oleh beberapa besar browser. Serta stateObject yang diteruskan dengan insiden kala URL terkini didorong ke gundukan riwayat. Subjek ini bermuatan informasi apa juga yang Kamu butuhkan.

5. replaceState( stateObject, title, url)

Gunanya replaceState( stateObject, title, url) mendekati dengan gunanya pushState(). Namun mengambil alih bagian dikala ini dalam gundukan riwayat dengan URL terkini. Bagian dikala ini belum pasti ialah bagian paling atas di gundukan. Bagian itu merupakan bagian yang ditunjukkan oleh penanda dikala ini.

4. Ilustrasi History API

Selanjutnya sebagian ilustrasi aplikasi History API HTML5.

Back() serta Forward()

Pertama- tama, ayo kita amati metode memindahkan riwayat pencarian lewat guna back() serta forward().

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

Subjek History merupakan window anak dari subjek, jadi isyarat di atas pula dapat ditulis selaku selanjutnya:

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

Butuh dicatat kalau melainkan Kamu sudah memindahkan riwayat pencarian ke balik, guna forward() itu tidak ada.

go()

Ayo kita amati gimana memakai guna go() buat menggapai dampak yang serupa semacam back() serta guna forward(). Bila Kamu mau mengutip tahap mundur dari riwayat penjelajahan, Kamu bisa memakai:

history. go(- 1);

Bila Kamu mau kembali ke 2 laman, Kamu bisa memakai:

history. go(- 2);

Begitu pula, bila Kamu mau memajukan riwayat pencarian. Lumayan tetapkan angka patokan ke nilai positif.

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

Buat mendesak status penjelajahan terkini ke dalam gundukan riwayat penjelajahan, Kamu bisa memakai guna subjek history pushState().

  • var state=;
  • var title=””;
  • var url
  • =” next- page. html”;
  • history. pushState( state, title, url);

Isyarat di atas mendesak URL terkini ke dalam gundukan riwayat pencarian. Pembedahan ini pula hendak mengganti tujuan URL di bilah tujuan browser, namun tidak hendak menimbulkan browser melompat ke URL terkini.

replaceState()

Guna replaceState() ini mengambil alih bagian riwayat pencarian yang ditunjukkan oleh penanda gundukan dikala ini. Bagian ini belum pasti ialah bagian paling atas di gundukan.

  • var state=;
  • var title=””;
  • var url
  • =” another- page. html”;
  • history. replaceState( state, title, url);

Pembedahan ini pula hendak mengganti tujuan URL di bilah tujuan browser, namun tidak hendak menimbulkan browser melompat ke URL terkini.

5. History Pergantian Event

History API HTML5 membolehkan kamu memantau pergantian dalam riwayat penjelajahan halaman. Metode keamanan History API HTML5 pula efisien dipakai. Jadi kamu tidak bisa memantau riwayat pergantian laman dengan julukan daerah yang berlainan.

Buat memantau pergantian dalam riwayat penjelajahan browser, Kamu bisa memakai window subjek onpopstate() buat memonitoring.