How to modify the current URL using jQuery

In web development, we often need to obtain or modify the URL of the current page through code. jQuery is one of the most popular JavaScript libraries currently, and it provides convenient URL manipulation functions. This article will introduce how to use jQuery to modify the current URL.

1. Get the current URL

In jQuery, we can use the window.location object to get the URL of the current page. This object has many useful properties such as href, protocol, host, pathname, search, hash, and more. Here is an example:

console.log(window.location.href);

After executing this code, the console will output the full URL of the current page.

2. Modify the current URL

If we want to modify the current URL without refreshing the page, we can use the pushState() or replaceState() method. Both methods are defined in the History object and can be called using the window.history object. The difference between them is that the pushState() method adds a new entry to the browser history, while the replaceState() method replaces the current entry with a new one.

The following is an example of using the pushState() method:

window.history.pushState(null, null, '/new_url');

This method accepts three parameters:

1. state: the current state object. Can be any type of JavaScript object, often used to store current state data.
2. title: The title of the new page. Most browsers ignore this parameter.
3. url: URL of the new page. Generally set to relative path or absolute path.

After executing the above code, the URL of the current page will be modified to /new_url, but the page will not be refreshed.

3. Listening to URL change events

When the pushState() or replaceState() method is used to change the URL, the browser will not automatically refresh the page. If the user directly pastes the modified URL into the browser address bar, it will not trigger a page refresh. Therefore, if we want to perform corresponding operations when the URL changes, we need to listen to the URL change event.

In jQuery, you can use the on() method to listen for URL change events. This method accepts two parameters, the first parameter is the event name, and the second parameter is the event handling function. We can listen to the popstate event, get the current URL in the event handler, and then perform corresponding operations.

The following is a code example for listening to the URL change event:

$(window).on('popstate', function() {
  console.log(window.location.href);
});

After executing the above code, whenever the URL changes, the console will output the new URL.

Summary

This article introduces how to use jQuery to modify the current URL. We can use the window.location object to get the current URL, use the pushState() or replaceState() method to modify the URL, and use the on() method to listen for URL change events. These methods can help us achieve rich interactive effects and improve user experience.

The above is the detailed content of How to modify the current URL using jQuery. For more information, please follow other related articles on the PHP Chinese website!