Complete guide to using jQuery to get the current web page URL

This guide provides jQuery code snippets to get the full URL of the current web page and store it in a variable for use with other scripts. This URL is the same as the URL you see in the address bar.

The following code snippet demonstrates how to use jQuery and pure JavaScript to get the URL of the current page:

$(document).ready(function() {
    // 使用jQuery
    var url = $(location).attr('href');

    // 使用純JavaScript
    var url2 = window.location.href;

    // 在警告窗口中顯示URL
    alert(url); //或者 alert(url2);
});

In addition, the following functions may be helpful when determining the absolute path:

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

FAQs (FAQs)

How to get the current URL in jQuery?

Get the current URL in jQuery, you can use the window.location.href attribute. This property returns the URL of the current page. Here is a simple example:

$(document).ready(function(){
  var currentURL = window.location.href;
  console.log(currentURL);
});

This code fetches and stores the current URL in the currentURL variable, and then console.log(currentURL) prints this URL to the console.

How to get the current URL that does not contain the query string in jQuery?

You can use the window.location.origin and window.location.pathname properties to get the current URL that does not contain the query string. Examples are as follows:

$(document).ready(function(){
  var currentURL = window.location.origin + window.location.pathname;
  console.log(currentURL);
});

This code takes the source (protocol, hostname, and port) and pathname of the URL, and connects these two parts to form a URL that does not contain the query string.

How to get query string from current URL in jQuery?

You can use the window.location.search attribute to get the query string, which returns the query string, including the question mark at the beginning. Examples are as follows:

$(document).ready(function(){
  var queryString = window.location.search;
  console.log(queryString);
});

This code takes the query string and stores it in the queryString variable, and then console.log(queryString) prints this query string to the console.

How to get the current URL without hash in jQuery?

You can use the window.location.href attribute and split() methods to get the current URL that does not contain a hash value. Examples are as follows:

$(document).ready(function(){
  var currentURL = window.location.href.split('#')[0];
  console.log(currentURL);
});

This code takes the current URL and splits it at the hash symbol (#). The [0] part gets the first part of the split URL, that is, the URL that does not contain hash values.

How to get the hash value of the current URL in jQuery?

You can use the window.location.hash attribute to get the hash value of the current URL. This property returns a hash value, including the hash symbol at the beginning. Examples are as follows:

$(document).ready(function(){
  var hash = window.location.hash;
  console.log(hash);
});

This code takes the hash value and stores it in the hash variable, and then console.log(hash) prints this hash value to the console.

How to change the current URL in jQuery without reloading the page?

You can use the history.pushState() method to change the current URL in jQuery without reloading the page. This method pushes new entries onto the history stack. Examples are as follows:

$(document).ready(function(){
  history.pushState(null, null, '/new-page.html');
});

This code changes the current URL to /new-page.html without reloading the page.

How to get the protocol for the current URL in jQuery?

You can use the window.location.protocol attribute to get the protocol of the current URL. This property returns the protocol of the URL, including the colon at the tail. Examples are as follows:

$(document).ready(function() {
    // 使用jQuery
    var url = $(location).attr('href');

    // 使用純JavaScript
    var url2 = window.location.href;

    // 在警告窗口中顯示URL
    alert(url); //或者 alert(url2);
});

This code takes the protocol and stores it in the protocol variable, and then console.log(protocol) prints this protocol to the console.

How to get the hostname of the current URL in jQuery?

You can use the window.location.hostname attribute to get the host name of the current URL. This property returns the hostname of the URL. Examples are as follows:

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

This code takes the hostname and stores it in the hostname variable, and then console.log(hostname) prints this hostname to the console.

How to get the port of the current URL in jQuery?

You can use the window.location.port attribute to get the port of the current URL. This property returns the port of the URL. Examples are as follows:

$(document).ready(function(){
  var currentURL = window.location.href;
  console.log(currentURL);
});

This code takes the port and stores it in the port variable, and then console.log(port) prints this port to the console.

How to get the pathname of the current URL in jQuery?

You can use the window.location.pathname attribute to get the path name of the current URL. This property returns the pathname of the URL. Examples are as follows:

$(document).ready(function(){
  var currentURL = window.location.origin + window.location.pathname;
  console.log(currentURL);
});

This code takes the pathname and stores it in the pathname variable, and then console.log(pathname) prints this pathname to the console.

With these methods, you can easily get and manipulate different parts of the URL of the current web page in jQuery. Remember to choose the right method according to your specific needs.

The above is the detailed content of jQuery Get Current Page URL. For more information, please follow other related articles on the PHP Chinese website!