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.
-
2Possible duplicate: Get protocol,domain and port from URL – blong Jun 24 '14 at 16:15
-
1stackoverflow.com/questions/406192/… – Nilesh Botre Aug 20 '15 at 13:34
Use:
window.location.href
As noted in the comments, the line below works, but it is bugged for Firefox.
document.URL
-
146In Firefox 12 the
document.URL
property doesn't update after awindow.location
to an anchor (#), whilewindow.location.href
does. I didn't test any other versions of Firefox. No issues usingdocument.URL
were found in Chrome 20 and IE9. – Telmo Marques Jul 7 '12 at 16:26 -
91also you can get host and clear location:
window.location.host
andwindow.location.href.toString().split(window.location.host)[1]
– Ali U Nov 26 '12 at 11:59 -
9and what's
document.baseURI
about then. Basically there are 3 ways to get urldocument.baseURI
,document.URL
, &location
. – Muhammad Umer Aug 29 '13 at 12:06 -
20-1: If you have a frame, image, or form with
name="URL"
then this property will be shadowed on thedocument
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 inwindow.location.href
. – Roy Tinker Dec 5 '13 at 0:02 -
14
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 create a new Location
object that has the current URL as follows:
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
I hope you got your answer..
-
9They are not "methods" of
window.location
, but properties, and here we have an example:var stringPathName = window.location.pathname
. – Peter Krauss Jul 22 '14 at 22:18 -
@FabioC. You can remove it by
substring
. However, it may be useful when you want to use to redirectdocument.location = "/page.html";
will redirect to root pagepage.html
– FindOut_Quran Dec 23 '16 at 5:11 -
3This 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 7 '19 at 7:10
-
1One 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 aquery
. Maybe either they can be reconciled, or further explanation can be added. – Panzercrisis Jan 7 '19 at 7:11 -
1
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
.
-
19
Gets the current page URL:
window.location.href
-
3
-
16It's the same thing. Full current URL refers to the document path (external address). – Zanoni Jun 23 '09 at 19:34
-
2Is it standardized like document.url? (I mean something like a w3c document) – chendral Jun 23 '09 at 19:47
-
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
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
.
- also, if your page has
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
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
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. :)
Use: window.location.href
.
As noted above, document.URL
doesn't update when updating window.location
. See MDN.
- Use
window.location.href
to get the complete URL. - Use
window.location.pathname
to get URL leaving the host.
-
4
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');
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
-
2You applied .toLowerCase() to the url which actually changes it. Some servers are case sensitive, (linux, etc...) – AnthonyVO May 15 '15 at 23:33
-
You should verbosely use window.href. This code only works in a context where this === window, however that might not always be the case especially if someone pasted this solution. – deadboy May 29 '15 at 16:01
-
It's not "some" servers that are case-sensitive. It's MOST servers. So I agree with AnthonyVO: changing the case of the URL is a very bad idea. – mivk Jun 11 '15 at 17:47
-
You can't toLowerCase() an URL being sure not to break it!!! If url is
http://www.server.com/path/to/Script.php?option=A1B2C3
, if the file system is case sensitive (Linux/Unix) not necessarilly Script.php and script.php are the same. And even if not case sensitive (Windows, some Mac Os),?option=A1B2C3
is not the same of?option=a1b2c3
, or even?Option=A1B2C3
. Only the server is case insensitive: www.server.com or www.SeRvEr.cOm are the same. – FrancescoMM Sep 9 '16 at 7:03
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"
For complete URL with query strings:
document.location.toString().toLowerCase();
For host URL:
window.location
-
11You applied .toLowerCase() to the url which actually changes it. Some servers are case sensitive, (linux, etc...) – AnthonyVO May 15 '15 at 23:32
-
As said, you can't toLowerCase() an URL being sure not to break it!!! If url is server.com/path/to/Script.php?option=A1B2C3, if the file system is case sensitive (Linux/Unix) not necessarilly Script.php and script.php are the same. And even if not case sensitive (Windows, some Mac Os), ?option=A1B2C3 is not the same of ?option=a1b2c3, or even ?Option=A1B2C3. Only the server is case insensitive: www.server.com or www.SeRvEr.cOm are the same. – FrancescoMM Sep 9 '16 at 7:06
-
Thank you AnthonyVO for pointing this. We can use only document.location.toString() to get complete URL. toLowerCase() was to compare like indexOf in your script. – Syed Nasir Abbas Apr 23 '18 at 7:05
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)
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.)
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
.
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
.
location.origin+location.pathname+location.search+location.hash;
and
location.href
does the same.
You have multiple ways to do this.
1:
location.href;
2:
document.URL;
3:
document.documentURI;
Getting the current URL with JavaScript :
window.location.toString();
window.location.href
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('/'));
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.
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 );
});