如何使用JavaScript在页面重载时为URL添加GET参数

Got it, let's sort this out. You want to automatically add ?value=key to your URL only when the page is reloaded (not when interacting with page elements), right? Here are two solid, reliable approaches to make this happen:

Approach 1: Use Navigation Type Detection (Modern Browsers) #

This method leverages the browser's navigation API to check if the page was reloaded, then appends the parameter if it doesn't already exist.

// Run this code when the page loads
document.addEventListener('DOMContentLoaded', () => {
  // Check if the page was reloaded
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  const isReload = navigationEntry?.type === 'reload';

  // Check if the "value" parameter is already present
  const urlParams = new URLSearchParams(window.location.search);
  const hasTargetParam = urlParams.has('value');

  if (isReload && !hasTargetParam) {
    // Build the new URL with the parameter
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set('value', 'key');
    
    // Replace the current URL to avoid cluttering history
    window.location.replace(newUrl.toString());
  }
});

Why this works: #

• performance.getEntriesByType('navigation')[0].type returns 'reload' specifically when the page is refreshed (either via the browser's refresh button or location.reload()).
• URLSearchParams makes it easy to check for existing parameters, preventing infinite reload loops.
• window.location.replace() updates the URL without adding a new entry to the browser's history, which feels cleaner for users.

Approach 2: Session Storage Flag (Backward Compatibility) #

If you need to support older browsers that don't have the modern navigation API, use a session storage flag to track whether the page has been loaded before.

document.addEventListener('DOMContentLoaded', () => {
  // Check if this is the first time the page is loaded
  if (!sessionStorage.getItem('initialPageLoad')) {
    sessionStorage.setItem('initialPageLoad', 'true');
  } else {
    // This means the page was reloaded
    const urlParams = new URLSearchParams(window.location.search);
    const hasTargetParam = urlParams.has('value');

    if (!hasTargetParam) {
      const newUrl = new URL(window.location.href);
      newUrl.searchParams.set('value', 'key');
      window.location.replace(newUrl.toString());
    }
  }
});

Why this works: #

• Session storage persists only for the current browser tab, so closing and reopening the tab will reset the flag (which is what we want).
• The flag lets us distinguish between a first-time load and a reload, ensuring the parameter is only added on refreshes.

Key Notes: #

• Always check if the parameter already exists before redirecting—this is critical to avoid infinite reload loops.
• Place this code either at the bottom of your <body> tag or wrap it in DOMContentLoaded to ensure it runs after the page is ready.
• Both methods work for manual browser refreshes and programmatic location.reload() calls, which aligns with your requirement of targeting page reloads exclusively.

内容的提问来源于stack exchange，提问作者user9291203