Dapatkan URL saat ini dengan jQuery?


1830

Saya menggunakan jQuery. Bagaimana cara mendapatkan jalur URL saat ini dan menetapkannya ke variabel?

URL contoh:

http://localhost/menuname.de?foo=bar&number=0


4
Saya pikir pertanyaannya harus dikembalikan ke meminta jQuery, karena ada jawaban untuk itu, terlepas dari apakah jQuery diperlukan untuk menyelesaikan tugas.
selamat tinggal


3
@ goodeye Tidak, tidak ada cara jQuery untuk mendapatkan lokasi; pada pelacak bug jQuery: »Mungkin berhasil tetapi tidak pernah didukung atau didokumentasikan. Cukup gunakan document.location.href yang lebih cepat, sederhana, dan lebih mudah dipahami. «Dengan kata lain, beberapa orang menggunakan jQuery untuk mendapatkan lokasi, tetapi mereka lebih mengandalkan bug, daripada fitur. Lihat: bugs.jquery.com/ticket/7858
feeela

Jawaban:


2520

Untuk mendapatkan jalur, Anda dapat menggunakan:

var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)


100
Jauh dari membunuhnya, jQuery memberi Javascript kehidupan baru. Apakah programmer C # / Java baru memahami pointer? Tidak. Apakah mereka perlu melakukannya? Tidak juga, abstraksi yang lebih baru cukup kuat untuk itu tidak menjadi masalah ..
daging

199
"Bagaimana saya XYZ di jQuery" dan jawabannya menjadi javascript biasa sangat umum. Anda mungkin tahu bagaimana melakukan sesuatu dalam javascript biasa; namun, karena inkonsistensi peramban, Anda mungkin lebih suka melakukannya dengan cara "jQuery". Saya ingat pra-jQuery atau framework saya pertama-tama akan memeriksa browser dan kemudian melakukan apa yang saya inginkan beberapa cara. Jadi, apakah jQuery membunuh plain js ... ya, terima kasih Tuhan, tetapi juga membuatnya dapat digunakan.
Parris

9
ini tidak berfungsi untuk url lengkap. sebagai contoh. untuk " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " ini hanya akan mengembalikan / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname hanya menaikkan URL "?" dan tidak mendapatkan permintaan kueri seperti yang ditanyakan dalam pertanyaan.
johntrepreneur

816

Dalam gaya jQuery murni:

$(location).attr('href');

Objek lokasi juga memiliki properti lain, seperti host, hash, protokol, dan pathname.


52
Rupanya, menggunakan $ (lokasi) di jQuery tidak didukung dan disarankan terhadap: bugs.jquery.com/ticket/7858
Peter

10
@Peter Bug ditutup tidak valid.
kevinji

21
@ mc10: Bagian "tidak valid" berlaku untuk permintaan untuk mendukung $ (lokasi); ini TIDAK boleh digunakan.
Peter

6
Jawaban ini tidak diperlukan, dan tanya jawab dapat diperbarui untuk tidak menggunakan jquery. Alasannya dapat ditemukan di sini bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@ HaralanDobrev: Anda seharusnya tidak dapat melakukannya .attr()di lokasi. (1) Ini bukan elemen, jadi $(location)paling teduh, dan (2) bahkan jika itu berhasil, Anda harus menggunakan .prop()untuk mendapatkan properti. .attr()adalah untuk atribut HTML.
cHao

471
http://www.refulz.com:8082/index.php#tab2?foo=789

Property    Result
------------------------------------------
host        www.refulz.com:8082
hostname    www.refulz.com
port        8082
protocol    http:
pathname    index.php
href        http://www.refulz.com:8082/index.php#tab2
hash        #tab2
search      ?foo=789

var x = $(location).attr('<property>');

Ini hanya akan berfungsi jika Anda memiliki jQuery. Sebagai contoh:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
  $(location).attr('href');      // http://www.refulz.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

13
Ini penjelasan yang sama dengan yang sebelumnya, tetapi dengan semua elemen dari objek. Jawaban yang bagus
Oskar Calvo

4
Seharusnya /index.phpbukan index.phpsebagai pathname.
Andrea


2
Menurut bugs.jquery.com/ticket/7858 ini hanya berfungsi secara tidak sengaja. Selain itu, attrseharusnya hanya digunakan pada objek DOM, untuk hal-hal yang dapat diatur dengan menggunakan atribut HTML.
MauganRa

69

Jika Anda memerlukan parameter hash yang ada di URL, window.location.hrefmungkin merupakan pilihan yang lebih baik.

window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

3
Jika seseorang hanya membutuhkan tag hash daripada dapat memanggil window.location.href
Amit Patel

15
Saya pikir @AmitPatel berartiwindow.location.hash
ptim

53

Anda akan ingin menggunakan objek bawaan JavaScript window.location.


3
ini tidak akan mengembalikan barang setelah '?' di lokasi.
Majid

@majidgeek bekerja untuk saya di Firefox, Chrome, dan IE. Bisakah Anda memberikan uji kasus kerusakan ini?
Barney

3
dapat mengkonfirmasi setidaknya di konsol yang window.location.pathnametidak mengambil apa pun setelah?
worc

45

Cukup tambahkan fungsi ini dalam JavaScript, dan itu akan mengembalikan jalur absolut dari jalur saat ini.

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

Saya harap ini berhasil untuk Anda.


1
Ini sangat membantu untuk sebuah skrip di mana saya malas memiliki beberapa URL dasar yang dikodekan. Saya lebih suka tidak memiliki trailing '/' di root dan memasukkannya di jalan, jadi saya hanya membuat baris keduavar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location adalah objek dalam javascript. mengembalikan data berikut

window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

di jquery bisa Anda gunakan

$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

1
bagaimana windo.location.origin?
Ali Sheikhpour

30

Ini adalah masalah yang lebih rumit daripada yang mungkin dipikirkan banyak orang. Beberapa browser mendukung objek lokasi JavaScript bawaan dan parameter / metode terkait yang dapat diakses melalui window.locationatau document.location. Namun, rasa berbeda dari Internet Explorer (6,7) tidak mendukung metode ini dengan cara yang sama, ( window.location.href? window.location.replace() Tidak didukung) sehingga Anda harus mengaksesnya secara berbeda dengan menulis kode kondisional setiap saat untuk memegang Internet Explorer dengan tangan.

Jadi, jika Anda memiliki jQuery yang tersedia dan dimuat, Anda mungkin juga menggunakan jQuery (lokasi), seperti yang lain karena itu menyelesaikan masalah ini. Namun, jika Anda melakukan-untuk contoh-beberapa redirection geolokasi sisi klien melalui JavaScript (yaitu, menggunakan Google Maps API dan metode objek lokasi), maka Anda mungkin tidak ingin memuat seluruh perpustakaan jQuery dan menulis kode kondisional Anda yang memeriksa setiap versi Internet Explorer / Firefox / dll.

Internet Explorer membuat kucing coding front-end tidak senang, tetapi jQuery adalah sepiring susu.


Additionaly: bugs.jquery.com/ticket/8138 . Dalam sumber jQuery 1.8.0 ada komentar: // # 8138, IE dapat melempar pengecualian ketika mengakses // bidang dari window.location jika document.domain telah ditetapkan.
Jan Święcki


24

java-script menyediakan banyak metode untuk mengambil URL saat ini yang ditampilkan di bilah alamat browser.

URL uji:

http://
stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762
?
rq=1&page=2&tab=active&answertab=votes
#
32942762
resourceAddress.hash();
console.log('URL Object ', webAddress);
console.log('Parameters ', param_values);

Fungsi:

var webAddress = {};
var param_values = {};
var protocol = '';
var resourceAddress = {

    fullAddress : function () {
        var addressBar = window.location.href;
        if ( addressBar != '' && addressBar != 'undefined') {
            webAddress[ 'href' ] = addressBar;
        }
    },
    protocol_identifier : function () { resourceAddress.fullAddress();

        protocol = window.location.protocol.replace(':', '');
        if ( protocol != '' && protocol != 'undefined') {
            webAddress[ 'protocol' ] = protocol;
        }
    },
    domain : function () {      resourceAddress.protocol_identifier();

        var domain = window.location.hostname;
        if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') {
            webAddress[ 'domain' ] = domain;
            var port = window.location.port;
            if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') {
                if(protocol == 'http') port = '80';
                if(protocol == 'https') port = '443';           
            }
            webAddress[ 'port' ] = port;
        }
    },
    pathname : function () {        resourceAddress.domain();

        var resourcePath = window.location.pathname;
        if ( resourcePath != '' && resourcePath != 'undefined') {
            webAddress[ 'resourcePath' ] = resourcePath;
        }
    },
    params : function () {      resourceAddress.pathname();

        var v_args = location.search.substring(1).split("&");

        if ( v_args != '' && v_args != 'undefined')
        for (var i = 0; i < v_args.length; i++) {
            var pair = v_args[i].split("=");

            if ( typeOfVar( pair ) === 'array' ) {
                param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
            }
        }
        webAddress[ 'params' ] = param_values;
    },
    hash : function () {        resourceAddress.params();

        var fragment = window.location.hash.substring(1);
        if ( fragment != '' && fragment != 'undefined')
            webAddress[ 'hash' ] = fragment;        
    }
};
function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
  • protokol « Browser web menggunakan Protokol Internet dengan mengikuti beberapa aturan untuk komunikasi antara Aplikasi WebHosted dan Klien Web (Browser). (http = 80 , https (SSL) = 443 , ftp = 21, dll.)

EX: Dengan nomor port default

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Host adalah nama yang diberikan ke titik akhir (mesin tempat sumber daya hidup) di Internet. www.stackoverflow.com - DNS Alamat IP localhost: 8080 - localhost

Nama domain adalah yang Anda daftarkan dengan aturan dan prosedur pohon Sistem Nama Domain (DNS). Server DNS dari seseorang yang mengelola domain Anda dengan Alamat-IP untuk keperluan pengalamatan. Dalam hierarki server DNS, nama Root dari stackoverlfow.com adalah com.

gTLDs      - com « stackoverflow (OR) in « co « google

Sistem lokal Anda harus memelihara domain yang bukan PUBLIK di File Host. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Path memberikan info tentang sumber daya tertentu di dalam host yang ingin diakses oleh klien Web
  • (?) «Kueri opsional adalah untuk melewatkan urutan pasangan atribut-nilai yang dipisahkan oleh pembatas (&).
  • (#) «Fragmen opsional sering merupakan atribut id dari elemen tertentu, dan browser web akan menggulir elemen ini ke tampilan.

Jika parameter memiliki zaman ?date=1467708674 maka gunakan.

var epochDate = 1467708674; var date = new Date( epochDate );

URL masukkan deskripsi gambar di sini


Url otentikasi dengan nama pengguna: kata sandi, Jika usernaem / kata sandi berisi simbol @
seperti:

Username = `my_email@gmail`
Password = `Yash@777`

maka Anda perlu menyandikan URL @sebagai %40. Lihat...

http://my_email%40gmail.com:Yash%40777@www.my_site.com

encodeURI()(vs) encodeURIComponent()contoh

var testURL = "http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762";

var Uri = "/:@?&=,#", UriComponent = "$;+", Unescaped = "(-_.!~*')"; // Fixed
var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped);
var encodeURIComponent_Str =  encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped );
console.log(encodeURI_Str, '\n', encodeURIComponent_Str);
/*
 /:@?&=,# +$; (-_.!~*') 
 %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*')
*/

23

Ini juga akan berfungsi:

var currentURL = window.location.href;

Ini memberikan URL lengkap yang dicari kebanyakan orang.
Kemal

19

Anda dapat login window.location dan melihat semua opsi, hanya untuk penggunaan URL:

window.location.origin

untuk seluruh jalur gunakan:

window.location.href

ada juga lokasi. _ _

.host
.hostname
.protocol
.pathname

Seharusnya tidak menggunakannya karena location.origin tidak berfungsi di Internet Explorer
Jacek Kolasa

15

Ini akan mengembalikan URL absolut dari halaman saat ini menggunakan JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

Jika ada seseorang yang ingin membuat URL dan tag hash, gabungkan dua fungsi:

var pathname = window.location.pathname + document.location.hash;

Untuk memperjelas: Anda tidak perlu menggunakan jQuery sama sekali, fungsi javascript di atas akan mengembalikan apa yang diminta OP?
GHC

12

Saya punya ini untuk menghapus variabel GET.

var loc = window.location;
var currentURL = loc.protocol + '//' + loc.host + loc.pathname;

12

Anda cukup mendapatkan jalur Anda menggunakan js itu sendiri, window.locationatau locationakan memberi Anda objek URL saat ini

console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);



11

Untuk mendapatkan URL dari jendela induk dari dalam iframe:

$(window.parent.location).attr('href');

NB: hanya berfungsi di domain yang sama


11

Berikut adalah contoh untuk mendapatkan URL saat ini menggunakan jQuery dan JavaScript:

$(document).ready(function() {

    //jQuery
    $(location).attr('href');

    //Pure JavaScript
    var pathname = window.location.pathname;

    // To show it in an alert window
    alert(window.location);
});


$.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){
    //alert(json.message);
});



9

window.location akan memberi Anda URL saat ini, dan Anda dapat mengekstrak apa pun yang Anda inginkan darinya ...


9

Lihat purl.js . Ini akan sangat membantu dan juga dapat digunakan, tergantung pada jQuery. Gunakan seperti ini:

$.url().param("yourparam");

8

Jika Anda ingin mendapatkan jalur situs root, gunakan ini:

$(location).attr('href').replace($(location).attr('pathname'),'');

1
bukankah begitu .replace('#.*', '')? Hapus bukan hanya tanda pagar tapi semuanya setelahnya juga?
Jonas Kölker

8

Sangat umum digunakan 3 top adalah

1. window.location.hostname 
2. window.location.href
3. window.location.pathname

8

var path = location.pathnamemengembalikan jalur URL saat ini (jQuery tidak diperlukan). Penggunaan window.locationadalah opsional.


8

Semua browser mendukung objek jendela Javascript. Ini mendefinisikan jendela browser.

Objek dan fungsi global menjadi bagian dari objek jendela secara otomatis.

Semua variabel global adalah properti objek jendela dan semua fungsi global adalah metodenya.

Seluruh dokumen HTML juga merupakan properti jendela.

Jadi, Anda dapat menggunakan objek window.location untuk mendapatkan semua atribut terkait url.

Javascript

console.log(window.location.host);     //returns host
console.log(window.location.hostname);    //returns hostname
console.log(window.location.pathname);         //return path
console.log(window.location.href);       //returns full current url
console.log(window.location.port);         //returns the port
console.log(window.location.protocol)     //returns the protocol

JQuery

console.log("host = "+$(location).attr('host'));
console.log("hostname = "+$(location).attr('hostname'));
console.log("pathname = "+$(location).attr('pathname')); 
console.log("href = "+$(location).attr('href'));   
console.log("port = "+$(location).attr('port'));   
console.log("protocol = "+$(location).attr('protocol'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


1
Saya melihat di location.pathnamemana Anda menggunakan location.path- apakah jawaban ini perlu diperbarui?
Edward

@Edward Diperbarui
Sumesh TG

7
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;

2
Anda harus menambahkan beberapa penjelasan tentang jawaban Anda.
Raptor

5
// get current URL

$(location).attr('href');
var pathname = window.location.pathname;
alert(window.location);

4

Di jstl kita dapat mengakses jalur url saat ini menggunakan pageContext.request.contextPath, Jika Anda ingin melakukan panggilan ajax,

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

Contoh: di halaman http://stackoverflow.com/questions/406192ini akan diberikanhttp://stackoverflow.com/controller/path

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.