To pass URL parameters to page links with JavaScript, you must capture the current URL’s query string and attach it to your destination links. This method is very useful for web developers. It allows you to carry user data, such as tracking IDs or search filters, from one page to another seamlessly.
Why You Should Pass URL Parameters
When a user visits your site, the URL often contains extra information after a question mark. These are called “query parameters.” If a user clicks a link on your site, that information is often lost unless you manually pass it along.
Common Use Cases
- Marketing Tracking: You can pass UTM parameters (like
utm_source) to keep track of where a user came from. - User Preferences: If a user chooses a specific language or a “dark mode” setting, you can pass that choice through the URL.
- Search Results: You can carry search terms from a landing page to a results page to provide a smoother experience.
Method 1: Updating All Links on a Page
You can use a script to scan every link on your page and attach the current URL parameters to them. This is the best approach if you want to ensure every single link maintains the user’s session data.
The Logic Behind the Script
The script follows three simple steps. First, it uses URLSearchParams to read the current browser URL. Next, it finds all <a> tags on the page. Finally, it loops through those links and injects the parameters into each one.
The JavaScript Code
// 1. Grab the current URL's query parameters
const currentParams = new URLSearchParams(window.location.search);
// 2. Select all links on the page
const allLinks = document.querySelectorAll('a');
allLinks.forEach(link => {
// Create a URL object to make editing easy
const linkUrl = new URL(link.href);
// 3. Add each current parameter to the new link
currentParams.forEach((value, key) => {
linkUrl.searchParams.set(key, value);
});
// Update the actual href attribute on the page
link.href = linkUrl.toString();
});Method 2: Updating a Single Specific Link
Sometimes you do not want to change every link on your site. You might only want to add parameters to one specific button or menu item. In this case, you can target a single element using its ID or class.
The JavaScript Code
function addParamsToSpecificLink(selector) {
const targetLink = document.querySelector(selector);
// Check if the link actually exists to avoid errors
if (!targetLink) return;
const url = new URL(targetLink.href);
const currentParams = new URLSearchParams(window.location.search);
// Loop through and append parameters
currentParams.forEach((value, key) => {
url.searchParams.set(key, value);
});
// Update the link
targetLink.href = url.toString();
}
// Example usage: Pass params to a link with the ID "signup-button"
addParamsToSpecificLink('#signup-button');Important Best Practices
While passing parameters is helpful, you should follow these rules to ensure your site stays fast and functional.
Avoid Messy URLs
Adding too many parameters can make URLs look very long and ugly. If you are passing many pieces of data, consider using Session Storage instead of the URL. This keeps the URL clean for the user.
Filter Out External Links
You generally do not want to pass your tracking parameters to external websites like Facebook or Twitter. Doing this can trigger privacy errors or look unprofessional. Always check if the link belongs to your domain before adding parameters.
Check for Existing Parameters
Before you add a parameter, check if it is already there. If a link already has a ?user=123 and you add ?user=456, the URL might break. Using the URLSearchParams.set() method, as shown in the examples above, helps prevent this by replacing old values with new ones.
Performance Matters
If your page has hundreds of links, running a loop on every page load can slow things down. For very large sites, try to only run the script when the user actually interacts with the page.
