Mevcut URL jQuery ile alınsın mı?


1829

JQuery kullanıyorum. Geçerli URL'nin yolunu nasıl alırım ve bir değişkene nasıl atarım?

Örnek URL:

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


4
Ben soru jQuery istemek için geri yüklenmesi gerektiğini düşünüyorum, çünkü jQuery görevi gerçekleştirmek için gerekli olup olmadığına bakılmaksızın, bunun için bir cevap var.
goodeye


3
@goodeye Hayır, konumu almanın jQuery yolu yok; jQuery hata izleyicisi olarak: »Çalışmış olabilir, ancak hiçbir zaman desteklenmemiştir veya belgelenmemiştir. Sadece daha hızlı, daha basit ve anlaşılması daha kolay olan document.location.href komutunu kullanın. «Başka bir deyişle, bazı kişiler yeri almak için jQuery kullandılar, ancak özellik yerine bir hataya güvendiler. Bakınız: bugs.jquery.com/ticket/7858
feeela

Yanıtlar:


2520

Yolu almak için şunları kullanabilirsiniz:

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
Konum nesnesinin özellikleri: developer.mozilla.org/en/DOM/window.location
bentford

100
Onu öldürmekten çok, jQuery Javascript'e yeni bir hayat verdi. Yeni C # / Java programcıları işaretçileri anlıyor mu? Hayır. İhtiyaçları var mı? Gerçekten değil, daha yeni soyutlamalar önemli olmayacak kadar güçlü ..
et

199
"Nasıl jQuery XYZ" ve cevabı düz javascript olmak oldukça yaygındır. Düz bir javascript'te bir şeylerin nasıl yapılacağını biliyor olabilirsiniz; ancak, tarayıcı tutarsızlıkları nedeniyle "jQuery" yolunu tercih edebilirsiniz. Önceden jQuery veya çerçeveyi hatırlıyorum Önce tarayıcıyı kontrol edip daha sonra istediğim şeyi birkaç yolla yapardım. JQuery de düz js öldürüyor ... evet, şükürler olsun, ama aynı zamanda kullanılabilir.
Parris

9
bu URL'nin tamamı için çalışmaz. Örneğin. " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " için bu yalnızca / mail / u / 0
döndürür

12
Ummm, ... window.location.pathname URL'yi yalnızca "?" ve soruda sorulduğu gibi sorgu parametrelerini almaz.
johntrepreneur

816

Saf jQuery tarzında:

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

Konum nesnesinin ana bilgisayar, karma, protokol ve yol adı gibi başka özellikleri de vardır.


52
Görünüşe göre, jQuery'de
Peter

10
@Peter Hata geçersiz olarak kapatıldı.
kevinji

21
@ mc10: "Geçersiz" bölüm $ (konum) 'u destekleme isteği için geçerlidir; bu KULLANILMAMALIDIR.
Peter

6
Bu cevaba gerek yoktur ve soru-cevap jquery kullanılmayacak şekilde güncellenebilir. Sebepleri burada bulabilirsiniz bugs.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HaralanDobrev: Konumda yapamamanız gerekir .attr(). (1) Bu bir öğe değildir, bu yüzden $(location)en iyi ihtimalle gölgeli ve (2) çalışsa bile, .prop()özellikleri almak için kullanmalısınız . .attr()HTML özellikleri içindir.
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>');

Bu yalnızca jQuery'niz varsa çalışır. Örneğin:

<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
Öncekiyle aynı açıklama, ancak nesnenin tüm unsuruyla. Mükemmel cevap.
Oskar Calvo

4
Yol adı /index.phpyerine olmalıdır index.php.
Andrea


2
Bugs.jquery.com/ticket/7858'e göre bu sadece kazara çalışıyor. Ayrıca, attrHTML özellikleri kullanılarak ayarlanabilecek şeyler için yalnızca DOM nesnelerinde kullanılması gerekir.
MauganRa

69

URL'de bulunan karma parametrelere ihtiyacınız varsa, window.location.hrefdaha iyi bir seçim olabilir.

window.location.pathname
=> /search

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

3
Birisi sadece window.location.href çağırabileceğinden daha fazla karma etikete ihtiyaç duyarsa
Amit Patel

15
@AmitPatel demek düşünüyorumwindow.location.hash
ptim

53

JavaScript'in yerleşik window.locationnesnesini kullanmak istersiniz .


3
bu '?' den sonra öğeleri döndürmez yer.
Majid

@majidgeek benim için Firefox, Chrome ve IE'de çalışıyor. Bu kırılmayı test edebilir misiniz?
Barney

3
en azından konsoldan window.location.pathnamesonra hiçbir şey almaz teyit edebilir?
worc

45

Bu işlevi JavaScript'e eklemeniz yeterlidir ve geçerli yolun mutlak yolunu döndürür.

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

Umarım senin için çalışır.


1
Bu tembel bir şekilde bazı sabit kodlanmış temel URL'ler vardı bir komut dosyası için harika yardımcı oldu. Kökte '/' var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
izi bırakmayı

40

window.location, javascript içindeki bir nesnedir. aşağıdaki verileri döndürür

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'de kullanabilirsiniz

$(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
Ne hakkında windo.location.origin?
Ali Sheikhpour

30

Bu, birçok kişinin düşündüğünden daha karmaşık bir konudur. Birkaç tarayıcı yerleşik JavaScript konum nesnelerini ve window.locationveya aracılığıyla erişilebilen ilişkili parametreleri / yöntemleri destekler document.location. Ancak, Internet Explorer'ın farklı tatları (6,7) bu yöntemleri aynı şekilde desteklemez ( window.location.href? window.location.replace()Desteklenmez), bu nedenle Internet Explorer'ı el altında tutmak için koşullu kod yazarak bunlara farklı şekilde erişmeniz gerekir.

Bu nedenle, jQuery kullanılabilir ve yüklüyse, jQuery (konum) da kullanabilirsiniz, çünkü diğerlerinin belirttiği gibi bu sorunları çözer. Bununla birlikte, JavaScript aracılığıyla (örneğin, Google Haritalar API'sı ve konum nesnesi yöntemleri kullanarak) bazı istemci tarafı coğrafi konum yönlendirmesi yapıyorsanız, tüm jQuery kitaplığını yüklemek ve koşullu kodunuzu yazmak istemeyebilirsiniz. Internet Explorer / Firefox / etc'nin her sürümünü kontrol eder.

Internet Explorer, ön uç kodlama kedisini mutsuz yapar, ancak jQuery bir tabak süttür.


Ek olarak: bugs.jquery.com/ticket/8138 . JQuery 1.8.0 kaynağında yorum var: // # 8138, IE, document.domain ayarlanmışsa window.location öğesinden bir alana erişirken bir istisna atabilir.
Jan Święcki


24

java-script tarayıcının adres çubuğunda görüntülenen geçerli URL'yi almak için birçok yöntem sağlar.

Test URL'si:

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

İşlev:

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 « Web tarayıcıları , WebHosted Uygulamaları ile Web İstemcisi (Tarayıcı) arasındaki iletişim için bazı kuralları izleyerek Internet Protokolünü kullanır. (http = 80 , https (SSL) = 443 , ftp = 21 vb.)

EX: Varsayılan bağlantı noktası numaralarıyla

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Ana bilgisayar, İnternet'teki bir uç noktaya (kaynağın yaşadığı makine) verilen addır. www.stackoverflow.com - Bir Uygulamanın DNS IP Adresi (VEYA) localhost: 8080 - localhost

Etki alanı adları, Etki Alanı Adı Sistemi (DNS) ağacının kurallarına ve yordamlarına göre kaydettiğiniz adlardır. Adresleme amacıyla alan adınızı IP Adresi ile yöneten birinin DNS sunucuları. DNS sunucusu hiyerarşisinde stackoverlfow.com'un kök adı com'dur.

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

Ana sistemde PUBLIC olmayan etki alanlarını korumanız gereken yerel sistem. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Yol, ana istemcide Web istemcisinin erişmek istediği kaynak hakkında bilgi verir
  • (?) «İsteğe bağlı bir sorgu, bir sınırlayıcı (&) ile ayrılmış bir dizi öznitelik değeri çifti geçirmektir.
  • (#) «İsteğe bağlı bir parça genellikle belirli bir öğenin id özelliğidir ve web tarayıcıları bu öğeyi görünüme kaydırır.

Parametrede bir Epoch ?date=1467708674 varsa kullanın.

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

URL resim açıklamasını buraya girin


Username: password ile kimlik doğrulama URL'si, usernaem / password aşağıdaki
gibi bir simge içeriyorsa :

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

URL'yi @as olarak kodlamanız gerekir %40. Bakınız ...

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

encodeURI()(vs) encodeURIComponent()örnek

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

Bu da işe yarayacaktır:

var currentURL = window.location.href;

Bu, çoğu kullanıcının aradığı tam URL'yi verir.
Kemal

19

Sadece URL kullanımı için window.location günlüğünü kaydedebilir ve tüm seçenekleri görebilirsiniz:

window.location.origin

tüm yol kullanımı için:

window.location.href

ayrıca yer var. _ _

.host
.hostname
.protocol
.pathname

Location.origin Internet Explorer'da çalışmadığı için kullanmamalı
Jacek Kolasa


13

URL ve karma etiketini birleştirmek isteyen biri varsa , iki işlevi birleştirin:

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

Açıklığa kavuşturmak için: jQuery kullanmanıza gerek yok, yukarıdaki javascript işlevi OP'nin istediği şeyi döndürecek mi?
GHC

12

GET değişkenlerini çıkarmak için bu var.

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

12

Sadece js kullanarak yolunuzu alabilirsiniz, window.locationya locationda size mevcut URL nesnesi verecektir

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



11

Üst pencerenin URL'sini bir iframe içinden almak için:

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

Not: yalnızca aynı alanda çalışır


11

Mevcut URL'yi jQuery ve JavaScript kullanarak almak için bir örnek:

$(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

Bkz purl.js . Bu gerçekten yardımcı olacaktır ve jQuery'ye bağlı olarak da kullanılabilir. Şöyle kullanın:

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

8

Kök sitenin yolunu almak istiyorsanız, şunu kullanın:

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

1
değil .replace('#.*', '')mi? Sadece hash işaretini değil, sonrasındaki her şeyi kaldırın?
Jonas Kölker

8

Çok Yaygın Kullanılan İlk 3

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

8

var path = location.pathnamegeçerli URL'nin yolunu döndürür (jQuery gerekli değildir). Kullanımı window.locationisteğe bağlıdır.


8

Tüm tarayıcılar Javascript pencere nesnesini destekler. Tarayıcının penceresini tanımlar.

Global nesneler ve işlevler otomatik olarak pencere nesnesinin bir parçası haline gelir.

Tüm global değişkenler pencere nesneleri özellikleridir ve tüm global işlevler onun yöntemleridir.

HTML belgesinin tamamı bir pencere özelliğidir.

Böylece url ile ilgili tüm özellikleri almak için window.location nesnesini kullanabilirsiniz.

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
location.pathnameNerede kullandığınızı görüyorum location.path- bu cevabın güncellenmesi gerekiyor mu?
Edward

@Edward Güncellendi
Sumesh TG

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

2
cevabınıza bir açıklama eklemelisiniz.
Raptor

5
// get current URL

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

4

Jstl'de, geçerli bir URL yoluna pageContext.request.contextPath, ajax çağrısı yapmak istiyorsanız,

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

Örn: bu sayfada http://stackoverflow.com/questions/406192verilecekhttp://stackoverflow.com/controller/path

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.