Get current page url in html

How to Get Current URL in JavaScript [with Useful Examples]

To get the current URL of the page you are visiting using JavaScript, access the window.location.href property:

Alternatively, you can access the current URL via document.URL property. However, it has some shortcomings that I’ll explain in a bit.

Let’s take a closer look at the window.location object. It has useful properties other than the href that returns the URL.

window.location

As you learned in the introduction already, window.location object is useful because you can retrieve the current page URL with it.

By the way, it’s possible to change the window.location object properties, such as the URL.

The window.location object has other useful properties too. Before accessing the properties, let’s take a quick look at the URL parts.

URL Structure

Let’s quickly go through the basic URL structure to distinguish the parts in it.

• Protocol. The protocol is the “first part” of a URL. It specifies which protocol to use to access the resource on the internet. Protocols include HTTP, HTTPS, or FTP.
• Subdomain. A domain can be split into logical sections, called subdomains. The most common example is www, which means the domain is (automatically) part of the world wide web subdomain. Better examples of subdomains are store, blog, or app. For example, app.example.com, or blog.example.com.
• Domain Name. The domain name is the actual address of your website. It is the host that owns the resources of your site. For instance, example.com is a domain name.
• Port. The port is an optional part of a URL because it’s set automatically. It is a number that determines the “gate” via which you want to retrieve the resources.
• File Path. The file path is like a file path on your computer. On a website, the web pages are files on a server. To access a particular web page, you need to specify the path to it on a server. For example, https://www.example.com/calculator.html.
• Query Parameters. Query parameters can be inserted into a URL to perform an action like a search on the server.
• Fragment. Fragment, hash, or anchor is used to specify a part of a page to be accessed. For example, example.com/blog/what-is-url#chapter1

Now you understand what makes up a URL.

In JavaScript, you can use the window.location object to access these URL parts. Let’s take a look at the window.location properties a bit closer.

If you are unfamiliar with URLs, make sure to read a comprehensive guide, What Is a URL?

Access URL Parts with window.location Properties

The window.location object has the following properties in JavaScript:

• href. The entire URL of your current page.
• protocol. The protocol that the URL uses.
• host. The hostname and the port of a URL.
• hostname. The hostname of a URL.
• port. The port of the URL.
• pathname. The file path in the URL.
• search. The query parameters of the URL.
• hash. The fragment or anchor of the URL.
• origin. A Combination of the protocol and host of the URL.

Here are examples of accessing these properties when the URL is https://www.codingem.com/best-pixel-art-software/#photoshop.

To make it easier to see, here is a zoomed-in image of accessing the URL properties.

Besides getting the current URL of a page, you can access parts of the URL easily. Instead of using regex or other heuristics to split the URL string, you can use the window.location properties to your advantage. This is the main way to operate with URLs using JavaScript.

Before you go, let’s talk about a commonly seen alternative, document.URL.

Get the Current URL with document.URL

Another popular way to get the current URL of a page is by accessing the URL property of the document.

Unlike window.location.href, the document.URL gives you a read-only string that represents the current page’s URL. So if you don’t want to make changes to the URL string, then it might make more sense to use document.URL over window.location.href.

But the problem with document.URL approach is it has some bugs in Firefox.

For example, in Firefox 12, the document.URL doesn’t change when adding an anchor to the end of a URL.

So if you want to be 100% sure to get the URL and all of its parts, use the window.location.href.

Wrap Up

Today you learned how to get the URL of a current page using JavaScript.

To put it short, use the window.location.href property to access the URL of the page. Keep in mind you can directly modify this property as well.

To get a read-only URL string, you might consider using the document.URL. But remember it has some bugs with Firefox.

Источник

JavaScript Window Location

The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

Window Location

The window.location object can be written without the window prefix.

• window.location.href returns the href (URL) of the current page
• window.location.hostname returns the domain name of the web host
• window.location.pathname returns the path and filename of the current page
• window.location.protocol returns the web protocol used (http: or https:)
• window.location.assign() loads a new document

Window Location Href

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

Example

Display the href (URL) of the current page:

Window Location Hostname

The window.location.hostname property returns the name of the internet host (of the current page).

Example

Display the name of the host:

Window Location Pathname

The window.location.pathname property returns the pathname of the current page.

Example

Display the path name of the current URL:

Window Location Protocol

The window.location.protocol property returns the web protocol of the page.

Example

Window Location Port

The window.location.port property returns the number of the internet host port (of the current page).

Example

Display the name of the host:

Most browsers will not display default port numbers (80 for http and 443 for https)

Window Location Assign

The window.location.assign() method loads a new document.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Get the Current URL with JavaScript – JS Location Tutorial

Joel Olawanle

If you’re a web developer, you’ll work with JavaScript when building dynamic and interactive web applications. One common task that you’ll need to perform is getting the current URL of a web page.

In this article, you will learn how to get the current URL using JavaScript’s Location object. I’ll show you some examples alongside some best practices.

How to Use the Location Object

The Location object is a built-in JavaScript object that provides information about the current URL of a web page. It contains various properties allowing you to access and modify different parts of a URL.

To access the Location object, you can use the window.location property. This returns the Location object for the current web page. This object contains many data, such as the URL, pathname, origin, host, search data, and more.

< "ancestorOrigins": < "0": "https://codepen.io" >, "href": "https://cdpn.io/cpe/boomboom/index.html?editors=0012&key=index.html-f1981af8-7dc2-f8b6-669a-8980d4a8d02a", "origin": "https://cdpn.io", "protocol": "https:", "host": "cdpn.io", "hostname": "cdpn.io", "port": "", "pathname": "/cpe/boomboom/index.html", "search": "?editors=0012&key=index.html-f1981af8-7dc2-f8b6-669a-8980d4a8d02a", "hash": "" > 

How to Access the Current URL With JavaScript

One common use case for the Location object is to get the current URL of a web page. You can do this by accessing the href property of the Location object.

The href property contains the complete URL of the current web page:

const currentUrl = window.location.href; console.log(currentUrl); 

This will log the current URL of the web page to the console.

How to Parse the Current URL With JavaScript

In addition to getting the current URL, you may need to parse it to extract specific parts. For example, you may want to extract the protocol, host, or path from the URL.

To parse the current URL, you can use the various properties of the Location object. For example, you can use the protocol property to get the protocol of the current URL:

const protocol = window.location.protocol; console.log(protocol); 

This will log the protocol of the current URL (for example, «http:» or «https:») to the console.

Other properties of the Location object that you can use to extract parts of the current URL include host , hostname , port , pathname , search , and hash .

const host = window.location.host; const pathname = window.location.pathname; const search = window.location.search; const hash = window.location.hash; 

Using these properties, you can extract various parts of the current URL.

How to Update the Current URL With JavaScript

In addition to getting and parsing the current URL, you may need to update it. For example, you may need to redirect the user to a different URL or modify the current URL dynamically.

To update the current URL, you can use the various methods of the Location object. For example, you can use the replace() method to replace the current URL with a new URL:

const newUrl = "https://example.com/new-page.html"; window.location.replace(newUrl); 

This will replace the current URL with the new one, redirecting the user to the new page.

Best Practices When Working With the Location Object

When working with the Location object, there are some best practices that you should follow to avoid potential pitfalls. For example, you should always check if the Location object is available before using it.

You should also be careful when modifying the current URL, as it can affect the user’s browsing experience. For example, you should avoid modifying the URL’s protocol, host, or port unless absolutely necessary.

Conclusion

In this article, you have learned how to get the current URL of a web page using JavaScript’s Location object. By understanding how to work with the Location object, you can build more dynamic and interactive web applications that provide a better user experience.

Thank you for reading, and I hope you have found this article informative and helpful. You can read this article on how to refresh a page with JavaScript for more information on working with URLs in JavaScript.

If you would like to learn more about JavaScript and web development, Browse 200+ expert articles on web development written by me, and also check out my blog for more captivating content.

Источник