Bagaimana cara mendapatkan URL sebelumnya dalam JavaScript?

230

Apakah ada cara untuk mendapatkan URL sebelumnya dalam JavaScript? Sesuatu seperti ini:

alert("previous url is: " + window.history.previous.href);

Apakah ada yang seperti itu? Atau haruskah saya menyimpannya di cookie? Saya hanya perlu tahu sehingga saya bisa melakukan transisi dari URL sebelumnya ke URL saat ini tanpa jangkar dan semua itu.

Lance Pollard
sumber

Jawaban:

351
document.referrer

dalam banyak kasus akan memberi Anda URL halaman terakhir yang dikunjungi pengguna, jika mereka sampai ke halaman saat ini dengan mengklik tautan (dibandingkan mengetik langsung ke bilah alamat, atau saya percaya dalam beberapa kasus, dengan mengirimkan formulir?). Ditentukan oleh DOM Level 2 . Lebih lanjut di sini.

window.historymemungkinkan navigasi, tetapi tidak akses ke URL di sesi karena alasan keamanan dan privasi. Jika riwayat URL yang lebih rinci tersedia, maka setiap situs yang Anda kunjungi dapat melihat semua situs lain yang pernah Anda kunjungi.

Jika Anda berurusan dengan keadaan bergerak di sekitar situs Anda sendiri, maka itu mungkin kurang rapuh dan tentu saja lebih berguna untuk menggunakan salah satu teknik manajemen sesi normal: data cookie, params URL, atau info sesi sisi server.

Ben Zotto
sumber
4
Ada juga document.referrer, jika Anda tiba di halaman saat ini melalui tautan (tetapi tidak, misalnya, dengan membookmark atau mengetik di bilah alamat).
Hellion
68
Saya akhirnya menyimpan url sebelumnya di cookie untuk situs, document.referrertidak selalu berfungsi. $.cookie("previousUrl", window.location.href, {path:"/"});.
Lance Pollard
4
Anda Tuan telah menyelamatkan saya dari dunia sakit JavaScript!
Anna Lam
8
sebelumnya bukan pengarah. jangan membingungkan mereka
Hijau
1
document.referrer tidak menyimpan hash dari url terakhir ... itu hanya merujuk pada url terakhir.
Nmaster88
29

Jika Anda ingin pergi ke halaman sebelumnya tanpa mengetahui url, Anda dapat menggunakan api Riwayat baru.

history.back(); //Go to the previous page
history.forward(); //Go to the next page in the stack
history.go(index); //Where index could be 1, -1, 56, etc.

Tetapi Anda tidak dapat memanipulasi konten tumpukan riwayat di browser yang tidak mendukung API Riwayat HTML5

Untuk informasi lebih lanjut lihat dokumen

RPDeshaies
sumber
2
Bagaimana cara melakukannya dengan mengetahui url, href = ''?
summu
@summu disimpan di browser itu sendiri
Ahmed Taha
20

document.referrer tidak sama dengan URL aktual di semua situasi.

Saya memiliki aplikasi di mana saya perlu membuat frameset dengan 2 frame. Satu frame diketahui, yang lainnya adalah halaman yang saya tautkan. Tampaknya itu document.referrerakan ideal karena Anda tidak harus memberikan nama file yang sebenarnya ke dokumen frameset.

Namun, jika Anda kemudian mengubah halaman bingkai bawah dan kemudian menggunakannya history.back()tidak memuat halaman asli ke dalam bingkai bawah, melainkan memuat ulang document.referrerdan sebagai akibatnya frameset hilang dan Anda kembali ke jendela awal yang asli.

Butuh beberapa saat untuk memahami hal ini. Jadi dalam array sejarah, document.referrerbukan hanya URL, itu juga spesifikasi jendela pengarah. Setidaknya, itulah cara terbaik yang saya bisa memahaminya saat ini.

kevin di KAB
sumber
Pada pengujian terbaru saya 'document.referrer' sekarang hanya kembali nama domain dan bukan URL lengkap untuk menghindari pelacakan.
Akash Kumar Seth
12

Jika Anda menulis aplikasi web atau aplikasi halaman tunggal (SPA) di mana perutean terjadi di app / browser daripada bolak-balik ke server, Anda dapat melakukan hal berikut:

window.history.pushState({ prevUrl: window.location.href }, null, "/new/path/in/your/app")

Kemudian, di rute baru Anda, Anda dapat melakukan hal berikut untuk mengambil URL sebelumnya:

window.history.state.prevUrl // your previous url
Jonathan Lin
sumber
0

Anda yang menggunakan Node.js dan Express dapat mengatur cookie sesi yang akan mengingat URL halaman saat ini, sehingga memungkinkan Anda untuk memeriksa perujuk pada pemuatan halaman berikutnya. Berikut ini contoh yang menggunakan express-sessionmiddleware:

//Add me after the express-session middleware    
app.use((req, res, next) => {
    req.session.referrer = req.protocol + '://' + req.get('host') + req.originalUrl;
    next();
});

Anda kemudian dapat memeriksa keberadaan cookie pengarah seperti:

if ( req.session.referrer ) console.log(req.session.referrer);

Jangan berasumsi bahwa cookie pengarah selalu ada dengan metode ini karena tidak akan tersedia pada kasus di mana URL sebelumnya adalah situs web lain, sesi dibersihkan atau baru saja dibuat (memuat situs web pertama kali).

Nadav
sumber
0
<script type="text/javascript">
    document.write(document.referrer);
</script>

document.referrer melayani tujuan Anda, tetapi tidak berfungsi untuk versi Internet Explorer lebih awal dari IE9.

Ini akan berfungsi untuk browser populer lainnya, seperti Chrome, Mozilla, Opera, Safari dll.

565
sumber
Bekerja di IE 9 untuk saya
frodo2975
-8

Ini akan menavigasi ke URL yang sebelumnya dikunjungi.

javascript:history.go(-1)
ishant
sumber
1
OP menanyakan cara mendapatkan, bukan cara pergi, ke URL sebelumnya
Matt Jensen