JQuery के साथ वर्तमान URL प्राप्त करें?


1828

मैं jQuery का उपयोग कर रहा हूँ। मैं वर्तमान URL का पथ कैसे प्राप्त करूं और इसे किसी चर में निर्दिष्ट करूं?

उदाहरण URL:

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

1
आप भी देख सकते हैं tech-blog.maddyzone.com/javascript/…
ऋतुराज रतन

4
मुझे लगता है कि सवाल को jQuery के लिए पूछने के लिए बहाल किया जाना चाहिए, क्योंकि इसके लिए एक उत्तर है, चाहे कार्य को पूरा करने के लिए jQuery की आवश्यकता हो।
गोयडे


3
@goodeye नहीं, स्थान पाने का कोई jQuery तरीका नहीं है; jQuery बग ट्रैकर के रूप में: »यह काम कर सकता है, लेकिन यह कभी भी समर्थित या प्रलेखित नहीं था। बस document.location.href का उपयोग करें, जो तेज, सरल और समझने में आसान है। «दूसरे शब्दों में, कुछ लोगों ने स्थान प्राप्त करने के लिए jQuery का उपयोग किया, लेकिन वे फीचर के बजाय बग पर निर्भर थे। देखें: Bugs.jquery.com/ticket/7858
फीसला

जवाबों:


2518

पथ प्राप्त करने के लिए, आप इसका उपयोग कर सकते हैं:

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)

79
: स्थान ऑब्जेक्ट के गुणों को developer.mozilla.org/en/DOM/window.location
bentford

100
इसे मारने से बहुत दूर, jQuery के जावास्क्रिप्ट को एक नया जीवन दिया गया है। क्या नए C # / Java प्रोग्रामर पॉइंटर्स को समझते हैं? नहीं, क्या उन्हें इसकी आवश्यकता है? वास्तव में नहीं, नए अमूर्त इसके लिए पर्याप्त शक्तिशाली हैं कि कोई फर्क नहीं पड़ता ..
मांस

199
"मैं jQuery में XYZ कैसे करूं" और सादा जावास्क्रिप्ट का जवाब बहुत आम है। आप जान सकते हैं कि सादे जावास्क्रिप्ट में कुछ करना कैसे है; हालाँकि, ब्राउज़र असंगतताओं के कारण आप इसे "jQuery" तरीके से करना पसंद कर सकते हैं। मुझे पूर्व jQuery या फ्रेमवर्क याद है मैं पहले ब्राउज़र की जांच करूंगा और फिर वही करूंगा जो मुझे मुट्ठी भर तरीके चाहिए थे। तो jQuery सादे मैदान में हत्या कर रहा है ... हाँ, भगवान का शुक्र है, लेकिन यह भी प्रयोग करने योग्य बना रहा है।
पर्रिस

9
यह पूर्ण url के लिए काम नहीं करता है। उदाहरण के लिए। " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " के लिए यह केवल / मेल / यू / 0
लौटाएगा

12
उम्म, ... window.location.pathname केवल URL को "?" और प्रश्न में पूछे गए अनुसार क्वेरी परम को नहीं मिलता है।
जॉन्थप्रन्योर

816

शुद्ध jQuery शैली में:

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

स्थान ऑब्जेक्ट में अन्य गुण भी होते हैं, जैसे होस्ट, हैश, प्रोटोकॉल और पाथनाम।


52
जाहिरा तौर पर, jQuery में $ (स्थान) का उपयोग करना असमर्थित है और इसके खिलाफ सलाह दी जाती है: बग्सजेकरी.com
पीटर

10
@ पैटर बग अमान्य के रूप में बंद हुआ।
केविनजी

21
@ mc10: "अमान्य" भाग $ (स्थान) का समर्थन करने के अनुरोध पर लागू होता है; इसका उपयोग नहीं किया जाना चाहिए।
पीटर

6
इस उत्तर की आवश्यकता नहीं है, और प्रश्न और उत्तर को अपडेट नहीं किया जा सकता है। कारण यहां पाया जा सकता है कि बग्सजेकरी
विश्वनाथ

8
@ हरलनदोबरेव: आपको .attr()स्थान पर करने में सक्षम नहीं होना चाहिए । (1) यह एक तत्व नहीं है, इसलिए $(location)सबसे अच्छा है, और (2) भले ही यह काम किया हो, आपको .prop()गुण प्राप्त करने के लिए उपयोग करना चाहिए । .attr()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>');

यह तभी काम करेगा जब आपके पास jQuery होगा। उदाहरण के लिए:

<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
यह वही स्पष्टीकरण है जो पहले था, लेकिन ऑब्जेक्ट के सभी तत्व के साथ। बहुत बढ़िया जवाब।
Oskar Calvo

4
पाथनाम के /index.phpबदले होना चाहिए index.php
एंड्रिया


2
Bugs.jquery.com/ticket/7858 के अनुसार यह केवल दुर्घटना से काम कर रहा है। इसके अलावा, attrकेवल HTML ऑब्जेक्ट्स का उपयोग करके सेट की जा सकने वाली चीज़ों के लिए DOM ऑब्जेक्ट्स पर उपयोग किया जाना चाहिए।
MauganRa

69

यदि आपको URL में मौजूद हैश मापदंडों की आवश्यकता है, तो window.location.hrefबेहतर विकल्प हो सकता है।

window.location.pathname
=> /search

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

3
यदि किसी को केवल हैश टैग की आवश्यकता है तो window.location.href पर कॉल कर सकते हैं
अमित पटेल

15
मुझे लगता है कि @AmitPatel का मतलब हैwindow.location.hash
ptim

53

आप जावास्क्रिप्ट की अंतर्निहित window.locationवस्तु का उपयोग करना चाहते हैं ।


3
इसके बाद आइटम वापस नहीं आएंगे? ' स्थान में।
माजिद

@majidgeek फ़ायरफ़ॉक्स, क्रोम और IE में मेरे लिए काम करता है। क्या आप इस ब्रेकिंग का टेस्ट केस दे सकते हैं?
बार्नी

3
कम से कम सांत्वना में कम से कम पुष्टि कर सकते हैं कि window.location.pathname?
वर मार्क

45

इस फ़ंक्शन को जावास्क्रिप्ट में जोड़ें, और यह वर्तमान पथ के निरपेक्ष पथ को वापस कर देगा।

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

आशा है कि ये आपके काम आएगा।


1
इसने एक स्क्रिप्ट के लिए बहुत मदद की, जहां मुझे आलसी कुछ हार्ड कोडेड बेस यूआरएल थे। मैं रूट पर अनुगामी '/' और पथ में सम्मिलित नहीं करना पसंद करता हूं, इसलिए मैंने दूसरी पंक्ति बनाईvar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

javascript में window.location एक ऑब्जेक्ट है। यह डेटा का अनुसरण करता है

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

jquery में आप उपयोग कर सकते हैं

$(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
किस बारे में windo.location.origin?
अली शेखपुर

30

यह अधिक जटिल मुद्दा है जितना कि कई लोग सोच सकते हैं। कई ब्राउज़र अंतर्निहित जावास्क्रिप्ट स्थान ऑब्जेक्ट्स और संबंधित पैरामीटर / विधियों के माध्यम से सुलभ window.locationया समर्थन करते हैं document.location। हालांकि, Internet Explorer (6.7) के विभिन्न जायके उसी तरह से इन तरीकों का समर्थन नहीं करते, ( window.location.href? window.location.replace()समर्थित नहीं) ताकि आप उन्हें उपयोग करने के लिए है अलग ढंग से सशर्त कोड सभी हाथ से पकड़ इंटरनेट एक्सप्लोरर के लिए समय लिख कर।

इसलिए, यदि आपके पास jQuery उपलब्ध है और लोड किया गया है, तो आप jQuery (स्थान) का उपयोग कर सकते हैं, जैसा कि दूसरों ने उल्लेख किया है क्योंकि यह इन मुद्दों को हल करता है। यदि फिर भी, आप जावास्क्रिप्ट के माध्यम से उदाहरण के लिए कुछ क्लाइंट साइड जियोलोकेशन रीडायरेक्शन कर रहे हैं (जो कि, Google मैप्स एपीआई और स्थान ऑब्जेक्ट विधियों का उपयोग करके) है, तो हो सकता है कि आप संपूर्ण jQuery लाइब्रेरी लोड न करें और अपना सशर्त कोड लिखें इंटरनेट एक्सप्लोरर / फ़ायरफ़ॉक्स / आदि के हर संस्करण की जाँच करता है।

इंटरनेट एक्सप्लोरर फ्रंट-एंड कोडिंग कैट को दुखी करता है, लेकिन jQuery दूध की एक प्लेट है।


Additionaly: bugs.jquery.com/ticket/8138 । JQuery 1.8.0 स्रोत में टिप्पणी है: // # 8138, IE का उपयोग करते समय एक अपवाद फेंक सकता है // window.location से एक फ़ील्ड यदि document.domain सेट किया गया है।
Jan atwięcki


24

java-script वर्तमान URL को पुनः प्राप्त करने के लिए कई तरीके प्रदान करता है जो ब्राउज़र के एड्रेस बार में प्रदर्शित होता है।

परीक्षण URL:

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

समारोह:

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();
}
  • प्रोटोकॉल « वेब-ब्राउज़र वेबहोस्टेड एप्लिकेशन और वेब क्लाइंट (ब्राउज़र) के बीच संचार के लिए कुछ नियमों का पालन करके इंटरनेट प्रोटोकॉल का उपयोग करते हैं। (http = 80 , https (SSL) = 443 , ftp = 21, आदि)

EX: डिफ़ॉल्ट पोर्ट नंबर के साथ

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (/) «होस्ट इंटरनेट पर एंड-पॉइंट (मशीन जिस पर संसाधन रहता है) को दिया गया नाम है। www.stackoverflow.com - डीएनएस आईपी ​​एक एप्लीकेशन का पता (OR) लोकलहोस्ट: 8080 - लोकलहोस्ट

डोमेन नाम वे होते हैं जिन्हें आप डोमेन नेम सिस्टम (DNS) ट्री के नियमों और प्रक्रियाओं द्वारा रजिस्टर करते हैं। किसी व्यक्ति का DNS सर्वर जो आपके डोमेन को संबोधित करने के लिए IP- पता के साथ प्रबंधित करता है। DNS सर्वर में पदानुक्रम में stackoverlfow.com का रूट नाम com है।

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

स्थानीय प्रणाली आपको डोमेन को बनाए रखना है जो होस्ट फ़ाइलों में सार्वजनिक नहीं है। localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «पथ होस्ट के भीतर विशिष्ट संसाधन के बारे में जानकारी देता है जिसे वेब क्लाइंट एक्सेस करना चाहता है
  • (?) «एक वैकल्पिक क्वेरी एक सीमांकक (और) द्वारा अलग किए गए विशेषता-मूल्य जोड़े के अनुक्रम को पास करना है।
  • (#) «एक वैकल्पिक टुकड़ा अक्सर एक विशिष्ट तत्व की एक आईडी विशेषता है, और वेब ब्राउज़र इस तत्व को ध्यान में रखते हुए स्क्रॉल करेंगे।

यदि पैरामीटर में एक युग है ?date=1467708674 तो उपयोग करें।

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

यूआरएल यहां छवि विवरण दर्ज करें


उपयोगकर्ता नाम के साथ प्रमाणीकरण url: पासवर्ड, अगर usernaem / पासवर्ड में @ प्रतीक शामिल है
:

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

फिर आपको URL को इस @तरह एनकोड करना होगा %40देखें ...

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

encodeURI()(बनाम) encodeURIComponent()उदाहरण

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 (-_.!~*')
*/


19

आप केवल URL उपयोग के लिए window.location पर लॉग इन कर सकते हैं और सभी विकल्प देख सकते हैं:

window.location.origin

पूरे पथ उपयोग के लिए:

window.location.href

वहाँ भी स्थान है। _ _

.host
.hostname
.protocol
.pathname

इसका उपयोग नहीं करना चाहिए क्योंकि इंटरनेट एक्सप्लोरर में location.origin काम नहीं करता है
Jacek Kolasa

15

यह जावास्क्रिप्ट / jQuery का उपयोग करके वर्तमान पृष्ठ का निरपेक्ष URL लौटाएगा ।

  • document.URL

  • $("*").context.baseURI

  • location.href


13

यदि कोई व्यक्ति है जो URL और हैश टैग को मिलाना चाहता है , तो दो कार्यों को संयोजित करें:

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

स्पष्ट करने के लिए: आपको jQuery का उपयोग करने की आवश्यकता नहीं है, ऊपर दी गई जावास्क्रिप्ट फ़ंक्शन वापस आ जाएगी जो ओपी पूछ रहा था?
जीएचसी

12

मुझे यह GET वैरिएबल को अलग करने के लिए है।

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

12

आप बस अपना रास्ता js का उपयोग करके प्राप्त कर सकते हैं, window.locationया locationआपको वर्तमान URL का उद्देश्य देंगे

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



11

एक iframe के भीतर से मूल विंडो का URL प्राप्त करने के लिए:

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

NB: केवल एक ही डोमेन पर काम करता है


11

यहाँ jQuery और जावास्क्रिप्ट का उपयोग करके वर्तमान URL प्राप्त करने के लिए एक उदाहरण दिया गया है:

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

10

निम्नलिखित उपयोगी कोड स्निपेट के उदाहरण हैं जिनका उपयोग किया जा सकता है - कुछ उदाहरण मानक जावास्क्रिप्ट कार्यों का उपयोग करते हैं और jQuery के लिए विशिष्ट नहीं हैं:

URL & Querystrings के लिए 8 उपयोगी jQuery के स्निपेट्स देखें ।




9

Purl.js देखें । यह वास्तव में मदद करेगा और इसका उपयोग jQuery के आधार पर भी किया जा सकता है। इसे इस तरह उपयोग करें:

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

8

यदि आप रूट साइट का मार्ग प्राप्त करना चाहते हैं, तो इसका उपयोग करें:

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

1
ऐसा नहीं होगा .replace('#.*', '')? न केवल हैश मार्क बल्कि इसके बाद भी सब कुछ निकालें?
जोनास कोल्कर


8

var path = location.pathnameवर्तमान URL का पथ लौटाता है (jQuery की आवश्यकता नहीं है)। का उपयोग window.locationवैकल्पिक है।


8

सभी ब्राउज़र जावास्क्रिप्ट विंडो ऑब्जेक्ट का समर्थन करते हैं। यह ब्राउज़र की विंडो को परिभाषित करता है।

वैश्विक ऑब्जेक्ट और फ़ंक्शंस स्वचालित रूप से विंडो ऑब्जेक्ट का हिस्सा बन जाते हैं।

सभी वैश्विक चर विंडो ऑब्जेक्ट गुण हैं और सभी वैश्विक फ़ंक्शन इसकी विधियाँ हैं।

संपूर्ण HTML दस्तावेज़ एक विंडो गुण भी है।

इसलिए आप सभी url संबंधित विशेषताओं को प्राप्त करने के लिए window.location ऑब्जेक्ट का उपयोग कर सकते हैं।

जावास्क्रिप्ट

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
मैं देख रहा हूं location.pathnameकि आप कहां उपयोग कर रहे हैं location.path- क्या इस उत्तर को अपडेट करने की आवश्यकता है?
एडवर्ड

@ एडवर्ड अपडेट
सुमेश टीजी



4

Jstl में हम वर्तमान url पथ का उपयोग कर सकते हैं pageContext.request.contextPath, यदि आप ajax कॉल करना चाहते हैं,

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

Ex: पेज में http://stackoverflow.com/questions/406192यह देगाhttp://stackoverflow.com/controller/path

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.