Nhận URL hiện tại với jQuery?


1830

Tôi đang sử dụng jQuery. Làm cách nào để có được đường dẫn của URL hiện tại và gán nó cho một biến?

URL ví dụ:

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


4
Tôi nghĩ rằng câu hỏi nên được khôi phục để yêu cầu jQuery, vì đã có câu trả lời cho điều đó, bất kể jQuery có bắt buộc phải hoàn thành nhiệm vụ hay không.
chào tạm biệt


3
@goodeye Không, không có cách nào để lấy vị trí của jQuery; kể từ trình theo dõi lỗi jQuery: »Nó có thể đã hoạt động nhưng nó không bao giờ được hỗ trợ hoặc ghi lại. Đơn giản chỉ cần sử dụng document.location.href nhanh hơn, đơn giản hơn và dễ hiểu hơn. «Nói cách khác, một số người đã sử dụng jQuery để lấy vị trí, nhưng họ dựa vào một lỗi, thay vì tính năng. Xem: bug.jquery.com/ticket/7858
feeela

Câu trả lời:


2520

Để có được đường dẫn, bạn có thể sử dụng:

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
Thuộc tính của đối tượng vị trí: developer.mozilla.org/en/DOM/window.location
bentford

100
Khác xa với việc tiêu diệt nó, jQuery đã mang đến cho Javascript một cuộc sống mới. Các lập trình viên C # / Java mới có hiểu con trỏ không? Không. Họ có cần không? Không thực sự, sự trừu tượng mới hơn đủ mạnh để nó không thành vấn đề ..
xác thịt

199
"Làm thế nào để tôi XYZ trong jQuery" và câu trả lời là javascript đơn giản là khá phổ biến. Bạn có thể biết cách làm một cái gì đó trong javascript đơn giản; tuy nhiên, do sự không nhất quán của trình duyệt, bạn có thể thích làm theo cách "jQuery". Tôi nhớ pre-jQuery hoặc framework trước tiên tôi sẽ kiểm tra trình duyệt và sau đó làm những gì tôi muốn một số cách. Vậy là jQuery giết chết js đơn giản ... vâng, cảm ơn chúa, nhưng nó cũng làm cho nó có thể sử dụng được.
Parris

9
Điều này không làm việc cho url đầy đủ. ví dụ. đối với " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 ", điều này sẽ chỉ trả về / mail / u / 0
dwaynemac

12
Ummm, ... window.location.pathname chỉ lấy URL lên "?" và không nhận được các thông số truy vấn như được hỏi trong câu hỏi.
johnt doanh nhân

816

Theo kiểu jQuery thuần túy:

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

Đối tượng vị trí cũng có các thuộc tính khác, như máy chủ, hàm băm, giao thức và tên đường dẫn.


52
Rõ ràng, việc sử dụng $ (vị trí) trong jQuery không được hỗ trợ và khuyên chống lại: bug.jquery.com/ticket/7858
Peter

10
@Peter Bug đóng là không hợp lệ.
kevinji

21
@ mc10: Phần "không hợp lệ" áp dụng cho yêu cầu hỗ trợ $ (vị trí); điều này KHÔNG nên được sử dụng.
Peter

6
Câu trả lời này là không cần thiết, và câu hỏi và câu trả lời có thể được cập nhật để không sử dụng jquery. Lý do có thể được tìm thấy ở đây bug.jquery.com/ticket/7858#comment:4
Vishwanath

8
@HaralanDobrev: Bạn không thể làm .attr()tại địa điểm. (1) Đây không phải là một yếu tố, vì vậy $(location)tốt nhất là mờ ám và (2) ngay cả khi nó hoạt động, bạn nên sử dụng .prop()để có được các thuộc tính. .attr()dành cho các thuộc tính 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>');

Điều này sẽ chỉ hoạt động nếu bạn có jQuery. Ví dụ:

<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
Đó là cùng một lời giải thích mà trước đây, nhưng với tất cả các yếu tố của đối tượng. Câu trả lời chính xác.
Oskar Calvo

4
Nên /index.phpthay vì index.phpcho tên đường dẫn.
Andrea


2
Theo bug.jquery.com/ticket/7858, điều này chỉ hoạt động một cách tình cờ. Ngoài ra, attrđược cho là chỉ được sử dụng trên các đối tượng DOM, cho những thứ có thể được đặt bằng cách sử dụng các thuộc tính HTML.
MauganRa

69

Nếu bạn cần các tham số băm có trong URL, window.location.hrefcó thể là lựa chọn tốt hơn.

window.location.pathname
=> /search

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

3
Nếu ai đó chỉ cần thẻ băm hơn có thể gọi window.location.href
Amit Patel

15
Tôi nghĩ rằng @AmitPatel có nghĩa làwindow.location.hash
ptim

53

Bạn sẽ muốn sử dụng window.locationđối tượng tích hợp sẵn của JavaScript .


3
Điều này sẽ không trả lại các mục sau '?' tại vị trí
Majid

@majidgeek hoạt động với tôi trong Firefox, Chrome và IE. Bạn có thể cung cấp một trường hợp thử nghiệm của phá vỡ này?
Barney

3
có thể xác nhận ít nhất trong bảng điều khiển window.location.pathnamekhông truy xuất bất cứ thứ gì sau?
worc

45

Chỉ cần thêm chức năng này trong JavaScript và nó sẽ trả về đường dẫn tuyệt đối của đường dẫn hiện tại.

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

Tôi hy vọng nó làm việc cho bạn.


1
Điều này giúp ích rất nhiều cho một kịch bản mà tôi lười biếng có một số URL cơ sở được mã hóa cứng. Tôi thích không có dấu '/' trên thư mục gốc và chèn nó vào đường dẫn, vì vậy tôi chỉ thực hiện dòng thứ haivar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));
cogdog

40

window.location là một đối tượng trong javascript. nó trả về dữ liệu sau

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

trong jquery bạn có thể sử dụng

$(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
những gì về windo.location.origin?
Ali Sheikhpour

30

Đây là một vấn đề phức tạp hơn nhiều người nghĩ. Một số trình duyệt hỗ trợ các đối tượng vị trí JavaScript tích hợp và các tham số / phương thức liên quan có thể truy cập thông qua window.locationhoặc document.location. Tuy nhiên, các hương vị khác nhau của Internet Explorer (6,7) không hỗ trợ các phương thức này theo cùng một cách, ( window.location.href? window.location.replace()Không được hỗ trợ), do đó bạn phải truy cập chúng theo cách khác bằng cách viết mã có điều kiện mọi lúc để giữ Internet Explorer.

Vì vậy, nếu bạn có sẵn jQuery và được tải, bạn cũng có thể sử dụng jQuery (vị trí), như những người khác đã đề cập vì nó giải quyết được các vấn đề này. Tuy nhiên, nếu bạn đang thực hiện - ví dụ - một số chuyển hướng định vị phía máy khách thông qua JavaScript (nghĩa là sử dụng API Google Maps và các phương thức đối tượng vị trí), thì bạn có thể không muốn tải toàn bộ thư viện jQuery và viết mã điều kiện của mình kiểm tra mọi phiên bản của Internet Explorer / Firefox / vv.

Internet Explorer làm cho con mèo mã hóa đầu cuối không hài lòng, nhưng jQuery là một đĩa sữa.


Bổ sung: bug.jquery.com/ticket/8138 . Trong nguồn jQuery 1.8.0 có nhận xét: // # 8138, IE có thể đưa ra một ngoại lệ khi truy cập // một trường từ window.location nếu document.domain đã được đặt.
Jan ęwięcki


24

java-script cung cấp nhiều phương thức để truy xuất URL hiện tại được hiển thị trên thanh địa chỉ của trình duyệt.

Kiểm tra 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);

Chức năng:

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();
}
  • giao thức « Trình duyệt web sử dụng Giao thức Internet bằng cách tuân theo một số quy tắc để liên lạc giữa Ứng dụng Webhosted và Máy khách Web (Trình duyệt). (http = 80 , https (SSL) = 443 , ftp = 21, v.v.)

EX: Với số cổng mặc định

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) «Máy chủ lưu trữ là tên được đặt cho điểm cuối (máy sử dụng tài nguyên) trên Internet. www.stackoverflow.com - Địa chỉ IP DNS của ứng dụng (OR) localhost: 8080 - localhost

Tên miền mà bạn đăng ký theo quy tắc và quy trình của cây Hệ thống tên miền (DNS). Máy chủ DNS của người nào đó quản lý tên miền của bạn bằng Địa chỉ IP để giải quyết các mục đích. Trong hệ thống phân cấp máy chủ DNS, tên gốc của stackoverlfow.com là com.

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

Hệ thống cục bộ bạn phải duy trì tên miền không CÔNG KHAI trong Tệp Máy chủ. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) «Đường dẫn cung cấp thông tin về tài nguyên cụ thể trong máy chủ mà máy khách Web muốn truy cập
  • (?) «Một truy vấn tùy chọn là truyền một chuỗi các cặp giá trị thuộc tính được phân tách bằng dấu phân cách (&).
  • (#) «Một đoạn tùy chọn thường là một thuộc tính id của một phần tử cụ thể và các trình duyệt web sẽ cuộn phần tử này vào dạng xem.

Nếu tham số có Epoch ?date=1467708674 thì sử dụng.

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

URL nhập mô tả hình ảnh ở đây


Url xác thực với tên người dùng: mật khẩu, Nếu usernaem / mật khẩu chứa ký hiệu @
như:

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

sau đó Bạn cần mã hóa URL @như %40. Tham khảo...

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

encodeURI()(so với) encodeURIComponent()ví dụ

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

Điều này cũng sẽ làm việc:

var currentURL = window.location.href;

Điều này cung cấp URL đầy đủ mà hầu hết mọi người tìm kiếm.
Kemal

19

Bạn có thể đăng nhập window.location và xem tất cả các tùy chọn, chỉ sử dụng URL:

window.location.origin

cho toàn bộ đường dẫn sử dụng:

window.location.href

Có cả vị trí. _ _

.host
.hostname
.protocol
.pathname

Không nên sử dụng vì location.origin không hoạt động trong Internet Explorer
Jacek Kolasa

15

Điều này sẽ trả về URL tuyệt đối của trang hiện tại bằng JavaScript / jQuery .

  • document.URL

  • $("*").context.baseURI

  • location.href


13

Nếu có ai đó muốn nối URL và thẻ băm, hãy kết hợp hai chức năng:

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

Để làm rõ: bạn hoàn toàn không cần sử dụng jQuery, hàm javascript ở trên sẽ trả về những gì OP yêu cầu?
GHC

12

Tôi có điều này để loại bỏ các biến GET.

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

12

Bạn có thể chỉ cần lấy đường dẫn của mình bằng chính js window.locationhoặc locationsẽ cung cấp cho bạn đối tượng của URL hiện tại

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



11

Để lấy URL của cửa sổ cha mẹ từ trong iframe:

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

NB: chỉ hoạt động trên cùng một tên miền


11

Dưới đây là một ví dụ để lấy URL hiện tại bằng jQuery và 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 sẽ cung cấp cho bạn URL hiện tạivà bạn có thể trích xuất bất cứ điều gì bạn muốn từ nó ...


9

Xem purl.js . Điều này thực sự sẽ giúp ích và cũng có thể được sử dụng, tùy thuộc vào jQuery. Sử dụng nó như thế này:

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

8

Nếu bạn muốn có được đường dẫn của trang gốc, hãy sử dụng:

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

1
sẽ không có được .replace('#.*', '')? Loại bỏ không chỉ dấu băm mà tất cả mọi thứ sau đó là tốt?
Jonas Kölker

8

3 cái được sử dụng rất phổ biến là

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

8

var path = location.pathnametrả về đường dẫn của URL hiện tại (không cần jQuery). Việc sử dụng window.locationlà tùy chọn.


8

Tất cả các trình duyệt hỗ trợ đối tượng cửa sổ Javascript. Nó xác định cửa sổ của trình duyệt.

Các đối tượng và hàm toàn cục sẽ tự động trở thành một phần của đối tượng cửa sổ.

Tất cả các biến toàn cục là thuộc tính đối tượng cửa sổ và tất cả các hàm toàn cục là phương thức của nó.

Toàn bộ tài liệu HTML cũng là một thuộc tính cửa sổ.

Vì vậy, bạn có thể sử dụng đối tượng window.location để nhận tất cả các thuộc tính liên quan đến 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
Tôi đang thấy location.pathnamenơi bạn đang sử dụng location.path- câu trả lời này có cần được cập nhật không?
Edward

@Edward Cập nhật
Sumesh TG

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

2
bạn nên thêm một số lời giải thích về câu trả lời của bạn.
Raptor

5
// get current URL

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

4

Trong jstl, chúng tôi có thể truy cập đường dẫn url hiện tại bằng cách sử dụng pageContext.request.contextPath, Nếu bạn muốn thực hiện cuộc gọi ajax,

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

Ví dụ: trong trang http://stackoverflow.com/questions/406192này sẽ cung cấphttp://stackoverflow.com/controller/path

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.