Bagaimana saya memiliki tindakan JavaScript yang mungkin memiliki beberapa efek pada halaman saat ini tetapi juga akan mengubah URL di browser sehingga jika pengguna mengklik memuat ulang atau bookmark, maka URL baru digunakan?
Akan lebih baik jika tombol kembali memuat ulang URL asli.
Saya mencoba merekam status JavaScript di URL.
javascript
url
html5-history
fragment-identifier
hashchange
Steven Noble
sumber
sumber
pushState
:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}
Jawaban:
Dengan HTML 5, gunakan
history.pushState
fungsinya . Sebagai contoh:dan href:
Jika Anda ingin mengubah URL tanpa menambahkan entri ke daftar tombol kembali, gunakan
history.replaceState
saja.sumber
Jika Anda ingin bekerja di browser yang tidak mendukung
history.pushState
danhistory.popState
belum, "lama" cara adalah untuk mengatur identifier fragmen, yang tidak akan menyebabkan reload halaman.Ide dasarnya adalah mengatur
window.location.hash
properti ke nilai yang berisi informasi status apa pun yang Anda perlukan, lalu gunakan window.onhashchange event , atau untuk browser lama yang tidak mendukungonhashchange
(IE <8, Firefox <3.6), periksa secara berkala untuk lihat apakah hash telah berubah (menggunakansetInterval
misalnya) dan perbarui halaman. Anda juga perlu memeriksa nilai hash pada pemuatan halaman untuk mengatur konten awal.Jika Anda menggunakan jQuery ada plugin hashchange yang akan menggunakan metode apa pun yang didukung browser. Saya yakin ada plugin untuk perpustakaan lain juga.
Satu hal yang perlu diperhatikan adalah bertabrakan dengan id pada halaman, karena browser akan menggulir ke elemen apa pun dengan id yang cocok.
sumber
setInterval
untuk memeriksa orangdocument.location.hash
dapat menggunakanhashchange
acara tersebut, karena itu jauh lebih diadopsi. Periksa di sini untuk browser apa yang mendukung setiap standar . Pendekatan saya saat ini adalah dengan menggunakan push / popState pada browser yang mendukungnya. Pada yang lain saya mengatur hash dan hanya menontonhashchange
di browser yang mendukung. Ini membuat IE <= 7 tanpa dukungan riwayat, tetapi dengan permalink yang berguna. Tapi siapa yang peduli dengan IE <= 7 sejarah?_trackPageview
dengan URL "asli" dari halaman baru.window.location.href berisi URL saat ini. Anda dapat membacanya, Anda dapat menambahkannya, dan Anda dapat menggantinya, yang dapat menyebabkan pemuatan ulang halaman.
Jika, seperti kedengarannya, Anda ingin merekam status javascript di URL sehingga dapat di-bookmark, tanpa memuat ulang halaman, tambahkan ke URL saat ini setelah # dan memiliki sepotong javascript yang dipicu oleh peristiwa onload mengurai arus saat ini URL untuk melihat apakah mengandung negara yang disimpan.
Jika Anda menggunakan? alih-alih #, Anda akan memaksa memuat ulang halaman, tetapi karena Anda akan mem-parsing status yang disimpan saat dimuat, ini mungkin sebenarnya bukan masalah; dan ini akan membuat tombol maju dan mundur bekerja dengan benar juga.
sumber
Saya akan sangat curiga ini tidak mungkin, karena itu akan menjadi masalah keamanan yang luar biasa. Misalnya, saya dapat membuat halaman yang terlihat seperti halaman login bank, dan membuat URL di bilah alamat terlihat seperti bank asli !
Mungkin jika Anda menjelaskan mengapa Anda ingin melakukan ini, orang-orang mungkin dapat menyarankan pendekatan alternatif ...
[Sunting pada 2011: Sejak saya menulis jawaban ini pada 2008, lebih banyak info terungkap mengenai teknik HTML5 yang memungkinkan URL untuk dimodifikasi asalkan berasal dari sumber yang sama]
sumber
history.pushState()
.Pengaturan keamanan browser mencegah orang mengubah url yang ditampilkan secara langsung. Anda bisa membayangkan kerentanan phishing yang akan menyebabkan.
Hanya cara andal untuk mengubah url tanpa mengubah halaman adalah dengan menggunakan tautan internal atau hash. misalnya: http://site.com/page.html menjadi http://site.com/page.html#item1 . Teknik ini sering digunakan dalam hijax (AJAX + preserve history).
Ketika melakukan ini, saya akan sering menggunakan tautan untuk tindakan dengan hash sebagai href, lalu menambahkan acara klik dengan jquery yang menggunakan hash yang diminta untuk menentukan dan mendelegasikan tindakan.
Saya harap itu menempatkan Anda di jalan yang benar.
sumber
jQuery memiliki plugin yang bagus untuk mengubah URL browser, yang disebut jQuery-pusher .
JavaScript
pushState
dan jQuery dapat digunakan bersama, seperti:history.pushState(null, null, $(this).attr('href'));
Contoh:
Hanya menggunakan JavaScript
history.pushState()
, yang mengubah pengarah, yang digunakan di header HTTP untuk objek XMLHttpRequest yang dibuat setelah Anda mengubah status.Contoh:
window.history.pushState("object", "Your New Title", "/new-url");
Metode pushState ():
pushState()
mengambil tiga parameter: objek keadaan, judul (yang saat ini diabaikan), dan (opsional) URL. Mari kita periksa masing-masing dari ketiga parameter ini secara lebih rinci:state object - Objek state adalah objek JavaScript yang dikaitkan dengan entri riwayat baru yang dibuat oleh
pushState()
. Setiap kali pengguna menavigasi ke negara baru, acara popstate dipecat, dan properti negara acara berisi salinan objek negara entri sejarah.Objek state dapat berupa apa saja yang dapat diserialisasi. Karena Firefox menyimpan objek negara ke disk pengguna sehingga dapat dipulihkan setelah pengguna me-restart browser-nya, kami memaksakan batas ukuran 640k karakter pada representasi serial objek negara. Jika Anda melewatkan objek negara yang representasi bersambung lebih besar dari ini
pushState()
, metode akan mengeluarkan pengecualian. Jika Anda membutuhkan lebih banyak ruang daripada ini, Anda dianjurkan untuk menggunakan sessionStorage dan / atau localStorage.title - Firefox saat ini mengabaikan parameter ini, meskipun mungkin menggunakannya di masa depan. Melewati string kosong di sini harus aman terhadap perubahan metode di masa mendatang. Atau, Anda bisa memberikan judul pendek untuk status yang Anda pindahkan.
URL - URL entri riwayat baru diberikan oleh parameter ini. Perhatikan bahwa browser tidak akan mencoba memuat URL ini setelah panggilan ke
pushState()
, tetapi mungkin berusaha memuat URL nanti, misalnya setelah pengguna me-restart browser-nya. URL baru tidak harus mutlak; jika itu relatif, itu diselesaikan relatif terhadap URL saat ini. URL baru harus memiliki asal yang sama dengan URL saat ini; jika tidak,pushState()
akan melempar pengecualian. Parameter ini opsional; jika tidak ditentukan, itu diatur ke URL dokumen saat ini.sumber
Ada komponen Yahoo YUI (Browser History Manager) yang dapat menangani ini: http://developer.yahoo.com/yui/history/
sumber
Galeri foto Facebook melakukan ini menggunakan hash di URL. Berikut beberapa contoh URL:
Sebelum mengklik 'berikutnya':
Setelah mengklik 'berikutnya':
Perhatikan hash-bang (#!) Segera diikuti oleh URL baru.
sumber
Ada plugin jquery http://www.asual.com/jquery/address/
Saya pikir inilah yang Anda butuhkan.
sumber
Apa yang berfungsi untuk saya adalah -
history.replaceState()
fungsi yaitu sebagai berikut -Ini tidak akan memuat ulang halaman, Anda dapat memanfaatkannya dengan acara javascript
sumber
Saya bertanya-tanya apakah itu akan mungkin selama jalur induk di halaman itu sama, hanya sesuatu yang baru ditambahkan ke sana.
Jadi seperti katakanlah pengguna ada di halaman:
http://domain.com/site/page.html
Lalu browser dapat membiarkan saya melakukannyalocation.append = new.html
dan halaman menjadi:http://domain.com/site/page.htmlnew.html
dan browser tidak mengubahnya.Atau cukup izinkan orang itu mengubah parameter get, jadi mari kita
location.get = me=1&page=1
.Jadi halaman asli menjadi
http://domain.com/site/page.html?me=1&page=1
dan tidak menyegarkan.Masalah dengan # adalah bahwa data tidak di-cache (setidaknya saya tidak berpikir begitu) ketika hash diubah. Jadi itu seperti setiap kali halaman baru sedang dimuat, sedangkan tombol back-and forward di halaman non- Ajax dapat men-cache data dan tidak menghabiskan waktu untuk memuat ulang data.
Dari apa yang saya lihat, hal sejarah Yahoo sudah memuat semua data sekaligus. Tampaknya tidak melakukan permintaan Ajax. Jadi ketika a
div
digunakan untuk menangani metode lembur yang berbeda, data itu tidak disimpan untuk setiap status riwayat.sumber
kode saya adalah:
dan tindakan:
dan contoh
Itu saja :)
sumber
Saya berikan jawaban yang lebih sederhana,
ini akan ditambahkan
/abc
setelah nama domain di URL browser. Cukup salin kode ini dan rekatkan di konsol browser dan lihat URL berubah menjadi " https://stackoverflow.com/abc "sumber
Saya sudah sukses dengan:
Itu hanya menambah
#myValue
URL saat ini. Jika Anda perlu memicu suatu acara di halaman Muat, Anda dapat menggunakan yang samalocation.hash
untuk memeriksa nilai yang relevan. Hanya ingat untuk menghapus#
dari nilai yang dikembalikan olehlocation.hash
missumber