Get the current URL with JavaScript?

Question

All I want is to get the website URL. Not the URL as taken from a link. On the page loading I need to be able to grab the full, current URL of the website and set it as a variable to do with as I please.

Possible duplicate: [Get protocol,domain and port from URL](http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url) — blong, Jun 24 '14 at 16:15

score 4200 · Accepted Answer · edited Oct 11 '20 at 06:57

4200

Use:

window.location.href

As noted in the comments, the line below works, but it is bugged for Firefox.

document.URL

See URL of type DOMString, readonly.

edited Oct 11 '20 at 06:57

GalAbra

4,739
4
21
39

answered Jun 23 '09 at 19:29

VolkerK

93,904
19
160
225

155

In Firefox 12 the `document.URL` property doesn't update after a `window.location` to an anchor (#), while `window.location.href` does. I didn't test any other versions of Firefox. No issues using `document.URL` were found in Chrome 20 and IE9. – Telmo Marques Jul 07 '12 at 16:26
101

also you can get host and clear location: `window.location.host` and `window.location.href.toString().split(window.location.host)[1]` – Ali U Nov 26 '12 at 11:59
11

and what's `document.baseURI` about then. Basically there are 3 ways to get url `document.baseURI`, `document.URL`, & `location`. – Muhammad Umer Aug 29 '13 at 12:06
25

-1: If you have a frame, image, or form with `name="URL"` then this property will be shadowed on the `document` object and your code will break. In that case, `document.URL` will refer to the DOM node instead. Better to use properties of the global object as in `window.location.href`. – Roy Tinker Dec 05 '13 at 00:02
17

"window.location.href" for the win – GabrielBB Jul 11 '14 at 12:31
This is kind of confusing for someone looking for the rigth info (I just mean there must be an edit to show `window.location.href` instead of `document.URL` as the answer) – Gerardo Charles Rojas Vega Nov 29 '14 at 02:16
1

everything :- https://stackoverflow.com/questions/6944744/javascript-get-portion-of-url-path – Dushman Sep 11 '17 at 04:27
3

@aliyouhannaei you could also do `window.location.pathname` to get just the path – wranvaud Oct 29 '19 at 14:03
`window.location.pathname` //yields: "/js" (where url is "https://stacksnippets.net/js") – APu Jun 29 '20 at 06:48
@AliU toString() should not be necessary as the former is a string. – Timo Mar 12 '21 at 19:36

score 814 · Answer 2 · edited May 26 '22 at 02:02

814

URL Info Access

JavaScript provides you with many methods to retrieve and change the current URL, which is displayed in the browser's address bar. All these methods use the Location object, which is a property of the Window object. You can read the current Location object by reading window.location:

var currentLocation = window.location;

Basic URL Structure

<protocol>//<hostname>:<port>/<pathname><search><hash>

protocol: Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL))
hostname: Host name specifies the host that owns the resource. For example, www.stackoverflow.com. A server provides services using the name of the host.
port: A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server.
pathname: The path gives info about the specific resource within the host that the Web client wants to access. For example, /index.html.
search: A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed).
hash: The anchor portion of a URL, includes the hash sign (#).

With these Location object properties you can access all of these URL components and what they can set or return:

href - the entire URL
protocol - the protocol of the URL
host - the hostname and port of the URL
hostname - the hostname of the URL
port - the port number the server uses for the URL
pathname - the path name of the URL
search - the query portion of the URL
hash - the anchor portion of the URL
origin - the window.location.protocol + '//' + window.location.host

I hope you got your answer..

edited May 26 '22 at 02:02

The Red Pea

14,933
15
89
118

answered Dec 23 '13 at 15:33

Nikhil Agrawal

25,020
19
86
120

13

They are not "methods" of `window.location`, but properties, and [here we have an example](http://stackoverflow.com/a/406208): `var stringPathName = window.location.pathname`. – Peter Krauss Jul 22 '14 at 22:18
1

@FabioC. You can remove it by `substring`. However, it may be useful when you want to use to redirect `document.location = "/page.html";` will redirect to root page `page.html` – FindOut_Quran Dec 23 '16 at 05:11
1

Keep in mind ie9 `pathname` does not have a leading slash, so it could be `index.html`. – AJcodez Jun 05 '17 at 14:55
6

This answers more than just the question stated. In fact, I searched probably around a month ago for a good way to get one or more specific parts out of the URL string (I think it was probably the current page I was trying to get), and even though other questions were more on-target, their answers were not as useful and straightforward for that purpose as this one. – Panzercrisis Jan 07 '19 at 07:10
2

One quick suggestion though: In the basic URL structure described above, there's a spot for `search`, but in the list of descriptions below, it's called a `query`. Maybe either they can be reconciled, or further explanation can be added. – Panzercrisis Jan 07 '19 at 07:11
2

It's called 'search' not 'query' – Apollo Data Dec 27 '19 at 17:01
1

Your answer is very detailed. Thank you for sharing you knowledge with us. – madaimartin Oct 21 '20 at 09:25
1

I appreciate this answer, straight forward and to the point. Thanks for sharing! – Radmation Oct 23 '20 at 19:23

score 337 · Answer 3 · edited Feb 18 '19 at 11:48

337

Use window.location for read and write access to the location object associated with the current frame. If you just want to get the address as a read-only string, you may use document.URL, which should contain the same value as window.location.href.

edited Feb 18 '19 at 11:48

Martijn Pieters

963,270
265
3,804
3,187

answered Jun 23 '09 at 19:35

Christoph

158,247
36
176
234

19

see also http://stackoverflow.com/questions/2430936/whats-the-difference-between-window-location-and-document-location-in-javascript/2431375#2431375 – Christoph Mar 12 '10 at 09:06

score 293 · Answer 4 · answered Jun 23 '09 at 19:28

293

Gets the current page URL:

window.location.href

answered Jun 23 '09 at 19:28

Zanoni

28,658
12
55
72

4

Note that that’s the window’s location not the document’s. – Gumbo Jun 23 '09 at 19:32
19

It's the same thing. Full current URL refers to the document path (external address). – Zanoni Jun 23 '09 at 19:34
3

Is it standardized like document.url? (I mean something like a w3c document) – chendral Jun 23 '09 at 19:47
1

`document` is the root of the document tree defined by the spec. `window` is generally equivalent but it might not be in some weird circumstances. – broinjc Sep 19 '14 at 16:19

score 89 · Answer 5 · edited Jun 25 '19 at 05:30

OK, getting the full URL of the current page is easy using pure JavaScript. For example, try this code on this page:

window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

The window.location.href property returns the URL of the current page.

document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;

<!DOCTYPE html>
<html>

<body>
  <h2>JavaScript</h2>
  <h3>The window.location.href</h3>
  <p id="root"></p>
</body>

</html>

Just not bad to mention these as well:

if you need a relative path, simply use window.location.pathname;
if you'd like to get the host name, you can use window.location.hostname;
and if you need to get the protocol separately, use window.location.protocol
- also, if your page has hash tag, you can get it like: window.location.hash.

So window.location.href handles all in once... basically:

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
    //true

Also using window is not needed if already in window scope...

So, in that case, you can use:

location.protocol

location.hostname

location.pathname

location.hash

location.href

score 47 · Answer 6 · edited Sep 03 '18 at 20:58

47

To get the path, you can use:

console.log('document.location', document.location.href);
console.log('location.pathname',  window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL

edited Sep 03 '18 at 20:58

Elena

364
2
9

answered Sep 10 '15 at 06:51

Sangeet Shah

2,939
2
21
25

Tmh · Answer 7 · 2017-06-15T10:01:00.093

45

Open Developer Tools, type in the following in the console and press Enter.

window.location

Ex: Below is the screenshot of the result on the current page.

Grab what you need from here. :)

edited Jun 15 '17 at 10:01

answered Jun 09 '17 at 09:32

Tmh

1,181
14
25

score 31 · Answer 8 · answered Apr 25 '14 at 16:14

31

Use: window.location.href.

As noted above, document.URL doesn't update when updating window.location. See MDN.

answered Apr 25 '14 at 16:14

Dorian

20,859
8
116
113

score 25 · Answer 9 · edited Apr 21 '15 at 09:08

25

Use window.location.href to get the complete URL.
Use window.location.pathname to get URL leaving the host.

edited Apr 21 '15 at 09:08

Peter Mortensen

30,030
21
100
124

answered Mar 26 '15 at 06:10

kishore

1,580
6
23
32

5

window.location.pathname does not include query and hash fragment – OMGPOP Jun 29 '15 at 07:53

score 20 · Answer 10 · edited May 25 '17 at 21:31

20

You can get the current URL location with a hash tag by using:

JavaScript:

 // Using href
 var URL = window.location.href;

 // Using path
 var URL = window.location.pathname;

jQuery:

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

edited May 25 '17 at 21:31

Peter Mortensen

30,030
21
100
124

answered Oct 08 '16 at 15:24

Bhaskar Bhatt

1,369
12
19

Don't use `URL` as your variable name; there is already a constructor on window.URL. See here: https://developer.mozilla.org/en-US/docs/Web/API/URL/URL – frontend_friend May 11 '22 at 13:19

score 19 · Answer 11 · edited Jul 02 '21 at 21:27

19

For complete URL with query strings:

document.location.toString()

For host URL:

window.location

edited Jul 02 '21 at 21:27

Sebastian Simon

16,564
7
51
69

answered Sep 05 '14 at 23:07

Syed Nasir Abbas

1,522
14
10

Weilory · Answer 12 · 2022-02-22T04:31:29.787


// http://127.0.0.1:8000/projects/page/2?name=jake&age=34
let url = new URL(window.location.href);
/*
hash: ""

host: "127.0.0.1:8000"

hostname: "127.0.0.1"

href: "http://127.0.0.1:8000/projects/page/2?username=jake&age=34"

origin: "http://127.0.0.1:8000"

password: ""

pathname: "/projects/page/2"

port: "8000"

protocol: "http:"

search: "?name=jake&age=34"

username: ""
*/

url.searchParams.get('name')
// jake

url.searchParams.get('age')
// 34

url.searchParams.get('gender')
// null

Rohan Patil · Answer 13 · 2014-07-07T09:54:01.220

12

var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

The above code can also help someone

edited Jul 07 '14 at 09:54

answered Dec 19 '13 at 12:58

Rohan Patil

1,779
1
20
36

score 10 · Answer 14 · answered Nov 03 '17 at 13:52

Adding result for quick reference

window.location;

 Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript",
 ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ, …}

document.location

  Location {href: "https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript", 
ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ
, …}

window.location.pathname

"/questions/1034621/get-the-current-url-with-javascript"

window.location.href

"https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript"

location.hostname

"stackoverflow.com"

score 9 · Answer 15 · answered Sep 29 '19 at 22:51

9

For those who want an actual URL object, potentially for a utility which takes URLs as an argument:

const url = new URL(window.location.href)

https://developer.mozilla.org/en-US/docs/Web/API/URL

answered Sep 29 '19 at 22:51

Seph Reed

6,511
8
42
89

The other great thing about this method is that you can use it as a URL builder- add or remove params, change the path, etc. and then use the .toString() method to always get a perfectly valid, nicely formatted URL string! – frontend_friend May 11 '22 at 13:22

score 9 · Answer 16 · answered Dec 27 '19 at 17:05

Nikhil Agrawal's answer is great, just adding a little example here you can do in the console to see the different components in action:

If you want the base URL without path or query parameter (for example to do AJAX requests against to work on both development/staging AND production servers), window.location.origin is best as it keeps the protocol as well as optional port (in Django development, you sometimes have a non-standard port which breaks it if you just use hostname etc.)

score 5 · Answer 17 · edited May 25 '17 at 21:32

The way to get the current location object is window.location.

Compare this to document.location, which originally only returned the current URL as a string. Probably to avoid confusion, document.location was replaced with document.URL.

And, all modern browsers map document.location to window.location.

In reality, for cross-browser safety, you should use window.location rather than document.location.

score 5 · Answer 18 · edited May 25 '17 at 21:32

5

In jstl we can access the current URL path using pageContext.request.contextPath. If you want to do an Ajax call, use the following URL.

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

Example: For the page http://stackoverflow.com/posts/36577223 this will give http://stackoverflow.com/controller/path.

edited May 25 '17 at 21:32

Peter Mortensen

30,030
21
100
124

answered Apr 12 '16 at 15:06

Maleen Abewardana

12,244
3
37
38

زياد · Answer 19 · 2020-07-09T03:41:22.837

5

location.origin+location.pathname+location.search+location.hash;

and

location.href

does the same.

edited Jul 09 '20 at 03:41

answered Apr 06 '17 at 11:47

زياد

862
10
14

score 5 · Answer 20 · answered Jan 01 '21 at 11:55

5

You have multiple ways to do this.

1:

location.href;

2:

document.URL;

3:

document.documentURI;

answered Jan 01 '21 at 11:55

Programmer

345
2
9

score 5 · Answer 21 · answered Feb 10 '21 at 10:04

5

Use this:

var url = window.location.href;

console.log(url);

answered Feb 10 '21 at 10:04

Giacomo Casadei

1,118
1
13
18

Kamil Kiełczewski · Answer 22 · 2022-02-23T22:11:11.037

3

Short

location+''

let url = location+'';

console.log(url);

edited Feb 23 '22 at 22:11

answered Jan 01 '20 at 22:37

Kamil Kiełczewski

71,169
26
324
295

score 2 · Answer 23 · edited May 25 '17 at 21:29

2

You can get the full link of the current page through location.href and to get the link of the current controller, use:

location.href.substring(0, location.href.lastIndexOf('/'));

edited May 25 '17 at 21:29

Peter Mortensen

30,030
21
100
124

answered Mar 14 '17 at 13:13

Khaled Harby

64
3

Hasib Kamal Chowdhury · Answer 24 · 2018-09-22T06:36:16.003

2

Getting the current URL with JavaScript :

window.location.toString();

window.location.href

edited Sep 22 '18 at 06:36

answered Dec 26 '17 at 04:08

Hasib Kamal Chowdhury

2,258
23
28

score 1 · Answer 25 · edited Oct 17 '19 at 02:59

if you are referring to a specific link that has an id this code can help you.

$(".disapprove").click(function(){
    var id = $(this).attr("id");

    $.ajax({
        url: "<?php echo base_url('index.php/sample/page/"+id+"')?>",
        type: "post",
        success:function()
        {
            alert("The Request has been Disapproved");
            window.location.replace("http://localhost/sample/page/"+id+"");
        }
    });
});

I am using ajax here to submit an id and redirect the page using window.location.replace. just add an attribute id="" as stated.

Ashish Kamble · Answer 26 · 2019-05-30T10:34:04.613

Firstly check for page is loaded completely in

browser,window.location.toString();

window.location.href

then call a function which takes url, URL variable and prints on console,

$(window).load(function(){
   var url = window.location.href.toString();
   var URL = document.URL;
   var wayThreeUsingJQuery = $(location).attr('href');
   console.log(url);
   console.log(URL);
   console.log(wayThreeUsingJQuery );
});

Get the current URL with JavaScript?

26 Answers26

Short

Linked

Related