Отримати поточну URL-адресу за допомогою jQuery?


1829

Я використовую jQuery. Як отримати шлях поточної URL-адреси та призначити її змінній?

Приклад URL:

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

1
ви також можете побачити tech-blog.maddyzone.com/javascript/…
Rituraj ratan

4
Я думаю, що питання слід повернути до запиту jQuery, оскільки на це є відповідь, незалежно від того, чи потрібен jQuery для виконання завдання.
goodeye


3
@goodeye Ні, немає способу jQuery отримати місцезнаходження; щодо трекера помилок jQuery: »Можливо, він працював, але його ніколи не підтримували і не задокументували. Просто використовуйте document.location.href, який є швидшим, простішим і простішим для розуміння. «Іншими словами, деякі люди використовували jQuery для отримання місця, але вони покладалися на помилку, а не на функцію. Дивіться: bugs.jquery.com/ticket/7858
honoela

Відповіді:


2519

Щоб отримати шлях, ви можете використовувати:

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/uk/DOM/window.location
bentford

100
Далеко не вбивство, jQuery дало JavaScript нове життя. Чи розуміють нові програмісти C # / Java покажчики? Ні. Їм потрібно? Насправді новітні абстракції досить потужні, щоб це не мало значення ..
плоть

199
"Як мені зробити XYZ в jQuery", і відповідь є звичайним javascript. Ви можете знати, як зробити щось у звичайному javascript; однак через невідповідності веб-переглядача ви можете скористатися способом "jQuery". Я пам'ятаю pre-jQuery або фреймворк, я спершу перевірив браузер, а потім зробив те, що хотів, декілька способів. Так само jQuery вбиває простого js ... так, слава богу, але це також робить його корисним.
Parris

9
це не працює для повного URL-адреси. наприклад. для " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 " це повернеться лише / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname отримує URL-адресу лише "?" і не отримує параметри запитів, як задано в запитанні.
Johnt предприниматель

816

У чистому стилі jQuery:

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

Об'єкт розташування також має інші властивості, такі як хост, хеш, протокол та ім'я шляху.


52
Мабуть, використання $ (location) у jQuery не підтримується та не рекомендується: bugs.jquery.com/ticket/7858
Петро,

10
Помилка @Peter закрита як недійсна.
kevinji

21
@ mc10: "Недійсна" частина застосовується до запиту на підтримку $ (location); це НЕ слід використовувати.
Петро

6
Ця відповідь не потрібна. Питання та відповіді можна оновити, щоб не використовувати jquery. Причини можна знайти тут bugs.jquery.com/ticket/7858#comment:1
Vishwanath

8
@HaralanDobrev: Ви не повинні бути в змозі зробити це .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
Це те саме пояснення, що і раніше, але з усім елементом об'єкта. Чудова відповідь.
Оскар Кальво

4
Потрібно /index.phpзамість index.phpімені шляху.
Андреа


2
За повідомленнями bugs.jquery.com/ticket/7858, це працює лише випадково. Крім того, attrпередбачається використовувати лише на об'єктах DOM, для речей, які можна встановити за допомогою атрибутів HTML.
MauganRa

69

Якщо вам потрібні параметри хешу, присутні в URL, window.location.hrefможе бути кращим вибором.

window.location.pathname
=> /search

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

3
Якщо комусь потрібен лише хеш-тег, можна зателефонувати window.location.href
Amit Patel

15
Я думаю, що @AmitPatel означаєwindow.location.hash
ptim

53

Вам потрібно використовувати вбудований window.locationоб’єкт JavaScript.


3
це не поверне елементи після "?" у розташуванні.
Маджід

@majidgeek працює для мене у Firefox, Chrome та IE. Чи можете ви надати тестовий випадок цього злому?
Барні

3
можна підтвердити щонайменше в консолі, що window.location.pathnameнічого не отримує після?
worc

45

Просто додайте цю функцію в JavaScript, і вона поверне абсолютний шлях поточного шляху.

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
Це чудово допомогло для сценарію, де я ліниво мав кілька важко закодованих базових URL-адрес. Я вважаю за краще не мати корінця "/" на корені та вставляти його в шлях, тому я щойно зробив другий рядокvar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location - об’єкт у javascript. він повертає наступні дані

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

Це складніше питання, ніж багато хто може подумати. Кілька браузерів підтримують вбудовані об’єкти розташування JavaScript та пов'язані з ними параметри / методи, доступні через window.locationабо document.location. Тим НЕ менше, різні аромати Internet Explorer (6,7) не підтримують ці методи таким же чином, ( window.location.href? window.location.replace()Чи не підтримується) , так що ви повинні отримати доступ до них по- різному писати умовний код весь час ручної фіксації Internet Explorer.

Отже, якщо у вас є jQuery доступний і завантажений, ви можете також використовувати jQuery (розташування), як інші згадані, оскільки він вирішує ці проблеми. Якщо ви робите для прикладу певне перенаправлення геолокації на стороні клієнта через JavaScript (тобто за допомогою API Карт Google і методів об’єкта розташування), можливо, ви не хочете завантажувати всю бібліотеку jQuery і писати свій умовний код, який перевіряє кожну версію Internet Explorer / Firefox / тощо.

Internet Explorer робить незадоволеного кодування переднього коду, але jQuery - тарілка з молоком.


Додатково: bugs.jquery.com/ticket/8138 . У джерелі jQuery 1.8.0 є коментар: // # 8138, IE може кинути виняток під час доступу до // поля з window.location, якщо було встановлено document.domain.
Ян Świę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();
}
  • протокол « Веб-браузери використовують Інтернет-протокол, дотримуючись деяких правил зв'язку між програмами WebHosted та Веб-клієнтом (Browser). (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 - DNS- адреса IP-адреси програми (АБО) localhost: 8080 - localhost

Доменні імена, які ви реєструєте за правилами та процедурами дерева систем доменних імен (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

  • (/) «Шлях дає інформацію про конкретний ресурс у хості, до якого веб-клієнт хоче отримати доступ
  • (?) «Необов’язковий запит - це передавання послідовності пар атрибутів та значень, розділених роздільником (&).
  • (#) «Необов’язковий фрагмент часто є атрибутом id певного елемента, і веб-браузери прокручують цей елемент у подання.

Якщо параметр має епоху, ?date=1467708674 то використовуйте.

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

URL-адреса введіть тут опис зображення


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

Ви можете увійти в систему window.location і переглянути всі параметри для використання лише URL-адреси:

window.location.origin

для використання всього шляху:

window.location.href

також є місце розташування. _ _

.host
.hostname
.protocol
.pathname

Не слід використовувати його, оскільки location.origin не працює в Internet Explorer
Яцек Коласа,

15

Це поверне абсолютну URL -адресу поточної сторінки за допомогою JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

Якщо хтось хоче об'єднати URL-адресу та тег хеш, поєднайте дві функції:

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

Для уточнення: вам взагалі не потрібно використовувати jQuery, функція javascript вище поверне те, про що вимагала ОП?
GHC


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

Щоб отримати URL-адресу батьківського вікна з iframe:

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

Примітка: працює лише в одному домені


11

Ось приклад отримання поточної URL-адреси за допомогою jQuery та 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

Див 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

Усі браузери підтримують об’єкт вікна Javascript. Він визначає вікно браузера.

Глобальні об'єкти та функції стають частиною об'єкта вікна автоматично.

Всі глобальні змінні - це властивості віконних об’єктів, а всі глобальні функції - це його методи.

Весь HTML-документ також є властивістю вікна.

Таким чином, ви можете використовувати об’єкт window.location, щоб отримати всі пов'язані з 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
Я бачу, location.pathnameде ви використовуєте location.path- чи потрібно цю відповідь оновлювати?
Едвард

@Edward Оновлено
Sumesh TG



4

У jstl ми можемо отримати доступ до поточного шляху до URL-адреси за допомогою. pageContext.request.contextPathЯкщо ви хочете здійснити дзвінок ajax,

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

Наприклад: на сторінці http://stackoverflow.com/questions/406192це буде даноhttp://stackoverflow.com/controller/path

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.