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&amp;number=0

javascript jquery url venkatachalam
sumber

1

Anda dapat melihat juga tech-blog.maddyzone.com/javascript/…

Rituraj ratan

4

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

selamat tinggal

1

mungkin rangkap dari Dapatkan URL saat ini dengan JavaScript?

vimal1083

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

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)

Ryan Doherty
sumber

79

Properti objek lokasi: developer.mozilla.org/en/DOM/window.location

bentford

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.

Boris Guéry
sumber

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>

Rizon
sumber

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

4

+1 jQuery adalah kode kualitas terbaik yang pernah ada, jika Anda tidak menggunakannya, idiot Anda. jQuery jelas merupakan jalan yang harus ditempuh. </sarcasm>

Oriol

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

jlfenaux
sumber

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.

Clawr
sumber

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.

Neville Bonavia
sumber

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

Gaurav
sumber

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.

negutron
sumber

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

28

Hanya untuk nama host, gunakan:

window.location.hostname

Mahmoud Farahat
sumber

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

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%[email protected]_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 (-_.!~*')
*/

Yash
sumber

23

Ini juga akan berfungsi:

var currentURL = window.location.href;

Suresh Pattu
sumber

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

dacopenhagen
sumber

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

Riyaz Hameed
sumber

13

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

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

Nis
sumber

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;

Aram Kocharyan
sumber

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);

Luaskan cuplikan

Mohideen bin Mohammed
sumber

11

 var currenturl = jQuery(location).attr('href');

hari maliya
sumber

11

Untuk mendapatkan URL dari jendela induk dari dalam iframe:

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

NB: hanya berfungsi di domain yang sama

Costa
sumber

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);
});

Peter Mortensen
sumber

10

Berikut ini adalah contoh potongan kode bermanfaat yang dapat digunakan - beberapa contoh menggunakan fungsi JavaScript standar dan tidak spesifik untuk jQuery:

Lihat 8 Cuplikan jQuery yang Berguna Untuk URL & Pertanyaan .

Issamovitch
sumber

10

Gunakan window.location.href . Ini akan memberi Anda URL lengkap .

Saikumar Anireddy
sumber

9

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

ZMR BINU
sumber

9

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

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

Chuanshi Liu
sumber

8

Jika Anda ingin mendapatkan jalur situs root, gunakan ini:

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

vikas mehta
sumber

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

Nitish Kumar Pal
sumber

8

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

Jonathan Lin
sumber

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

Luaskan cuplikan

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>

Luaskan cuplikan

Sumesh TG
sumber

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;

Hema Ganapathy
sumber

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);

Ayan Chakraborty
sumber

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

Maleen Abewardana
sumber

Dapatkan URL saat ini dengan jQuery?

Jawaban: