Dapatkan URL saat ini dengan JavaScript?

Jawaban:

3686

Menggunakan:

window.location.href

Seperti disebutkan dalam komentar, baris di bawah berfungsi, tetapi disadap untuk Firefox.

document.URL;

Lihat URL tipe DOMString, hanya baca .

Peter Mortensen
sumber
142
Di Firefox 12 document.URLproperti tidak memperbarui setelah window.locationjangkar (#), sementara window.location.hreftidak. Saya telah membuat demo langsung di sini: jsfiddle.net/PxgKy Saya tidak menguji versi lain dari Firefox. Tidak ditemukan masalah dalam penggunaan document.URLdi Chrome 20 dan IE9.
Telmo Marques
88
Anda juga bisa mendapatkan host dan membersihkan lokasi: window.location.hostdanwindow.location.href.toString().split(window.location.host)[1]
ali youhannaei
8
dan bagaimana document.baseURIdengan itu. Pada dasarnya ada 3 cara untuk mendapatkan url document.baseURI, document.URL, & location.
Muhammad Umer
20
-1: Jika Anda memiliki bingkai, gambar, atau formulir dengan name="URL"maka properti ini akan dibayangi documentobjek dan kode Anda akan rusak. Dalam hal ini, document.URLsebagai gantinya akan merujuk ke simpul DOM. Lebih baik menggunakan properti objek global seperti pada window.location.href.
Roy Tinker
13
"window.location.href" untuk kemenangan
GabrielBB
662

Akses Info URL

JavaScript memberi Anda banyak metode untuk mengambil dan mengubah URL saat ini, yang ditampilkan di bilah alamat browser. Semua metode ini menggunakan Locationobjek, yang merupakan properti dari Windowobjek. Anda dapat membuat Locationobjek baru yang memiliki URL saat ini sebagai berikut:

var currentLocation = window.location;

Struktur URL Dasar

<protocol>//<hostname>:<port>/<pathname><search><hash>

  • protokol: Menentukan nama protokol yang digunakan untuk mengakses sumber daya di Internet. (HTTP (tanpa SSL) atau HTTPS (dengan SSL))

  • nama host: Nama host menentukan host yang memiliki sumber daya. Sebagai contoh www.stackoverflow.com,. Server menyediakan layanan menggunakan nama host.

  • port: Nomor port yang digunakan untuk mengenali proses tertentu yang akan diteruskan Internet atau pesan jaringan lainnya ketika tiba di server.

  • pathname: Path memberikan info tentang sumber daya spesifik dalam host yang ingin diakses oleh klien Web. Sebagai contoh /index.html,.

  • Cari: String kueri mengikuti komponen jalur, dan memberikan serangkaian informasi yang dapat digunakan sumber daya untuk beberapa tujuan (misalnya, sebagai parameter untuk pencarian atau sebagai data yang akan diproses).

  • hash: Bagian anchor dari URL, termasuk tanda hash (#).

Dengan ini Location properti objek Anda dapat mengakses semua komponen URL ini dan apa yang dapat mereka atur atau kembalikan:

  • href - seluruh URL
  • protokol - protokol URL
  • tuan rumah - nama host dan port dari URL
  • nama host - nama host dari URL
  • Pelabuhan - nomor port yang digunakan server untuk URL
  • pathname - nama path dari URL
  • Cari - bagian permintaan URL
  • hash - bagian jangkar dari URL

Saya harap Anda mendapat jawaban Anda ..

Nikhil Agrawal
sumber
7
Mereka tidak "metode" dari window.location, tetapi sifat, dan di sini kita memiliki contoh : var stringPathName = window.location.pathname.
Peter Krauss
@FabioC. Anda dapat menghapusnya dengan substring. Namun, ini mungkin berguna ketika Anda ingin menggunakan untuk mengarahkan ulang document.location = "/page.html";akan mengarahkan ke halaman rootpage.html
FindOut_Quran
1
Ini menjawab lebih dari sekedar pertanyaan yang dinyatakan. Bahkan, saya mencari sekitar sebulan yang lalu untuk menemukan cara yang baik untuk mendapatkan satu atau lebih bagian spesifik dari string URL (saya pikir itu mungkin halaman saat ini yang saya coba dapatkan), dan meskipun pertanyaan lain lebih lanjut tentang -Tentang, jawaban mereka tidak berguna dan langsung untuk tujuan yang satu ini.
Panzercrisis
1
Satu saran cepat: Dalam struktur URL dasar yang dijelaskan di atas, ada tempat untuk search, tetapi dalam daftar deskripsi di bawah, itu disebut a query. Mungkin mereka dapat direkonsiliasi, atau penjelasan lebih lanjut dapat ditambahkan.
Panzercrisis
1
Ini disebut 'pencarian' bukan 'permintaan'
Apollo Data
320

Gunakan window.locationuntuk akses baca dan tulis ke objek lokasi yang terkait dengan bingkai saat ini. Jika Anda hanya ingin mendapatkan alamat sebagai string hanya-baca, Anda dapat menggunakan document.URL, yang harus berisi nilai yang sama dengan window.location.href.

Christoph
sumber
19
lihat juga stackoverflow.com/questions/2430936/…
Christoph
264

Mendapat URL halaman saat ini:

window.location.href
Zanoni
sumber
3
Perhatikan bahwa itu adalah lokasi jendela bukan pada dokumen.
Gumbo
16
Itu adalah hal yang sama. URL penuh saat ini merujuk ke jalur dokumen (alamat eksternal).
Zanoni
2
Apakah standar seperti document.url? (Maksud saya sesuatu seperti dokumen w3c)
chendral
documentadalah akar dari pohon dokumen yang ditentukan oleh spesifikasi. windowumumnya setara tetapi mungkin tidak dalam beberapa keadaan aneh.
broinjc
57

OK, mendapatkan URL lengkap dari halaman saat ini mudah menggunakan JavaScript murni. Misalnya, coba kode ini di halaman ini:

window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

The window.location.hrefproperti mengembalikan URL dari halaman saat ini.

document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;
<!DOCTYPE html>
<html>

<body>
  <h2>JavaScript</h2>
  <h3>The window.location.href</h3>
  <p id="root"></p>
</body>

</html>
Luaskan cuplikan

Tidak buruk untuk menyebutkan ini juga:

  • jika Anda membutuhkan jalur relatif, cukup gunakan window.location.pathname;

  • jika Anda ingin mendapatkan nama host, Anda dapat menggunakan window.location.hostname;

  • dan jika Anda perlu mendapatkan protokol secara terpisah, gunakan window.location.protocol

    • juga, jika halaman Anda memiliki hashtag, Anda bisa mendapatkannya seperti: window.location.hash.

Jadi window.location.hrefmenangani semuanya sekaligus ... pada dasarnya:

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
    //true

Juga menggunakan windowtidak diperlukan jika sudah dalam lingkup jendela ...

Jadi, dalam hal ini, Anda dapat menggunakan:

location.protocol

location.hostname

location.pathname

location.hash

location.href

Dapatkan URL saat ini dengan JavaScript

Alireza
sumber
window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href; tidak selalu benar! window.location.pathname tidak ada parameter GET.
AssassiN
40

Untuk mendapatkan jalur, Anda dapat menggunakan:

console.log('document.location', document.location.href);
console.log('location.pathname',  window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL
Luaskan cuplikan

Shah Sangeet
sumber
35

Buka Alat Pengembang , ketikkan yang berikut di konsol dan tekan Enter .

window.location

Contoh: Di bawah ini adalah tangkapan layar dari hasil di halaman saat ini.

masukkan deskripsi gambar di sini

Raih apa yang Anda butuhkan dari sini. :)

tmh
sumber
29

Gunakan: window.location.href.

Seperti disebutkan di atas, document.URL tidak diperbarui saat memperbarui window.location. Lihat MDN .

Dorian
sumber
21
  • Gunakan window.location.hrefuntuk mendapatkan URL lengkap.
  • Gunakan window.location.pathnameuntuk mendapatkan URL meninggalkan host.
Kishore
sumber
4
window.location.pathname tidak termasuk kueri dan fragmen hash
OMGPOP
17

Anda bisa mendapatkan lokasi URL saat ini dengan tag hash dengan menggunakan:

JavaScript:

 // Using href
 var URL = window.location.href;

 // Using path
 var URL = window.location.pathname;

jQuery :

$(location).attr('href');
Bhaskar Bhatt
sumber
10 
var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

Kode di atas juga dapat membantu seseorang

Rohan Patil
sumber
2
Anda menerapkan .toLowerCase () ke url yang sebenarnya mengubahnya. Beberapa server peka huruf besar-kecil, (linux, dll ...)
AnthonyVO
Anda harus menggunakan window.href secara lisan. Kode ini hanya berfungsi dalam konteks di mana jendela === ini, namun itu mungkin tidak selalu menjadi masalah terutama jika seseorang menempelkan solusi ini.
deadboy
Ini bukan "beberapa" server yang peka terhadap huruf besar-kecil. Ini server PALING. Jadi saya setuju dengan AnthonyVO: mengubah kasus URL adalah ide yang sangat buruk.
mivk
Anda tidak dapat toLowerCase () suatu URL yang dipastikan tidak akan merusaknya !!! Jika url adalah http://www.server.com/path/to/Script.php?option=A1B2C3, jika sistem file case-sensitive (Linux / Unix) tidak perlu Script.php dan script.php adalah sama. Dan bahkan jika tidak sensitif huruf (Windows, beberapa Mac Os), ?option=A1B2C3tidak sama ?option=a1b2c3, atau bahkan ?Option=A1B2C3. Hanya server yang case-sensitive: www.server.com atau www.SeRvEr.cOm adalah sama.
FrancescoMM
8

Menambahkan hasil untuk referensi cepat

window.location;

 Location {href: "/programming/1034621/get-the-current-url-with-javascript",
 ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ, …}

document.location

  Location {href: "/programming/1034621/get-the-current-url-with-javascript", 
ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ
, …}

window.location.pathname

"/questions/1034621/get-the-current-url-with-javascript"

window.location.href

"/programming/1034621/get-the-current-url-with-javascript"

location.hostname

"stackoverflow.com"
Hitesh Sahu
sumber
7

Untuk URL lengkap dengan string kueri:

document.location.toString().toLowerCase();

Untuk URL inang:

window.location
Syed Nasir Abbas
sumber
11
Anda menerapkan .toLowerCase () ke url yang sebenarnya mengubahnya. Beberapa server peka huruf besar-kecil, (linux, dll ...)
AnthonyVO
Seperti yang dikatakan, Anda tidak dapat toLowerCase () URL yang dipastikan tidak akan merusaknya !!! Jika url adalah server.com/path/to/Script.php?option=A1B2C3 , jika sistem file peka huruf besar-kecil (Linux / Unix), tidak perlu Script.php dan script.php sama. Dan bahkan jika tidak peka huruf besar kecil (Windows, beberapa Mac Os),? Option = A1B2C3 tidak sama dengan? Option = a1b2c3, atau even? Option = A1B2C3. Hanya server yang case-sensitive: www.server.com atau www.SeRvEr.cOm adalah sama.
FrancescoMM
Terima kasih AnthonyVO untuk menunjukkan ini. Kami hanya dapat menggunakan document.location.toString () untuk mendapatkan URL lengkap. toLowerCase () adalah untuk membandingkan seperti indexOf dalam skrip Anda.
Syed Nasir Abbas
4

Di jstl kita dapat mengakses jalur URL saat ini menggunakan pageContext.request.contextPath. Jika Anda ingin melakukan panggilan Ajax, gunakan URL berikut.

url = "${pageContext.request.contextPath}" + "/controller/path"

Contoh: Untuk halaman http://stackoverflow.com/posts/36577223ini akan memberikan http://stackoverflow.com/controller/path.

Maleen Abewardana
sumber
4

Cara untuk mendapatkan objek lokasi saat ini adalah window.location.

Bandingkan ini dengan document.location, yang awalnya hanya mengembalikan URL saat ini sebagai string. Mungkin untuk menghindari kebingungan, document.locationdiganti dengan document.URL.

Dan, semua browser modern memetakan document.locationke window.location.

Pada kenyataannya, untuk keamanan lintas-browser, Anda harus menggunakan window.locationdaripada document.location.

Josip Ivic
sumber
3

Jawaban Nikhil Agrawal luar biasa, cukup tambahkan sedikit contoh di sini yang dapat Anda lakukan di konsol untuk melihat berbagai komponen yang sedang beraksi:

masukkan deskripsi gambar di sini

Jika Anda ingin URL basis tanpa parameter path atau kueri (misalnya untuk melakukan permintaan AJAX agar tidak bekerja pada server pengembangan / pementasan DAN produksi), window.location.originyang terbaik adalah menjaga protokol serta port opsional (dalam pengembangan Django, Anda kadang-kadang memiliki port non-standar yang merusaknya jika Anda hanya menggunakan nama host, dll.)

Data Apollo
sumber
0 
   location.origin+location.pathname+location.search+location.hash;
زياد
sumber
0

Anda bisa mendapatkan tautan lengkap dari halaman saat ini melalui location.href dan untuk mendapatkan tautan dari pengontrol saat ini, gunakan:

location.href.substring(0, location.href.lastIndexOf('/'));
Khaled Harby
sumber
0

Mendapatkan URL saat ini dengan JavaScript:

  • window.location.toString ();

  • window.location.href

Hasib Kamal
sumber
0

jika Anda merujuk ke tautan tertentu yang memiliki id kode ini dapat membantu Anda.

$(".disapprove").click(function(){
    var id = $(this).attr("id");

    $.ajax({
        url: "<?php echo base_url('index.php/sample/page/"+id+"')?>",
        type: "post",
        success:function()
        {
            alert("The Request has been Disapproved");
            window.location.replace("http://localhost/sample/page/"+id+"");
        }
    });
});

Saya menggunakan ajax di sini untuk mengirimkan id dan mengalihkan halaman menggunakan window.location.replace . cukup tambahkan atribut id=""seperti yang dinyatakan.

rasa ingin tahu
sumber
-2

Pertama-tama periksa untuk halaman dimuat sepenuhnya 

browser,window.location.toString();

window.location.href

lalu panggil fungsi yang mengambil url, variabel URL, dan cetak di konsol,

$(window).load(function(){
   var url = window.location.href.toString();
   var URL = document.URL;
   var wayThreeUsingJQuery = $(location).attr('href');
   console.log(url);
   console.log(URL);
   console.log(wayThreeUsingJQuery );
});
Ashish Kamble
sumber