javascript:location.reload(true) | How to Hard Reload a Web Page

javascript:location.reload(true) forces a web page to reload by trying to bypass the browser cache, but the “true” parameter is now ignored by modern browsers and is no longer recommended.

Meaning of javascript:location.reload(true)

The JavaScript code javascript:location.reload(true) was created to refresh a web page and request all resources from the server instead of using the cached files.
It calls the browser’s Location interface and asks for a full reload.
Modern browsers treat true as deprecated, so location.reload() is the correct syntax today.

How location.reload() Works

The location object belongs to the Window interface.
It controls the URL of the current page and provides methods like reload, assign, and replace.
Calling location.reload() tells the browser to load the page again.
Without any argument it behaves as a normal refresh similar to pressing F5.

Difference Between Normal Reload and Hard Reload

A normal reload uses files already saved in the browser cache for speed.
A hard reload forces the browser to download fresh files from the server.
Earlier, passing true to location.reload(true) forced a hard reload.
Now browsers ignore this parameter, so a different approach is needed to get a real hard reload.

Modern Way to Hard Reload

Because location.reload(true) no longer forces a cache bypass, developers now use other methods:

• Manual keyboard shortcut:
  On Windows press Ctrl + Shift + R.
  On macOS press Command + Shift + R.
  This performs a true hard reload.
• Cache-busting query strings:
  Append a unique value to the URL to make the browser treat it as new.
  Example: location.href = location.pathname + '?v=' + Date.now(); This tricks the browser into loading fresh resources.
• HTTP headers:
  Set server headers like Cache-Control: no-cache or must-revalidate so browsers always request new content.

When to Use a Hard Reload

Developers or site owners use a hard reload when:

• Updating CSS, JavaScript, or image files that might be cached.
• Testing recent changes in production.
• Fixing display issues caused by old cached files.
• Troubleshooting content delivery network (CDN) or proxy caching problems.

Using javascript:location.reload(true) in Bookmarks

Many people add javascript:location.reload(true) as a bookmarklet.
A bookmarklet is a browser bookmark that runs JavaScript instead of opening a web page.
While it still refreshes the page, it no longer guarantees a hard reload in modern browsers.
Replacing it with a simple javascript:location.reload() is more correct today.

Browser Support and Deprecation

All major browsers such as Chrome, Edge, Firefox, and Safari have removed support for the boolean parameter.
The W3C and MDN documentation explain that location.reload(forceGet) with a boolean argument is obsolete.
Only the no-argument form remains standard.
Developers are encouraged to adopt cache-control strategies instead of relying on this parameter.

Example: Simple Page Refresh Button

A button can trigger a page reload with a small script:

<button onclick="location.reload()">Refresh Page</button>

This refreshes the page without worrying about deprecated parameters.

Example: Force New Content with Query Parameter

If an application must always serve the newest file, add a unique query each time:

function hardReload() {
  window.location.href = window.location.pathname + '?time=' + new Date().getTime();
}

This ensures the URL is different on every click, forcing the browser to fetch it again.

SEO and Performance Considerations

Using javascript:location.reload(true) or frequent forced reloads can affect performance.
Repeated hard reloads increase server load and data transfer.
Search engines like Google prefer stable URLs and may crawl URLs with changing query strings differently.
Good caching rules on the server are the recommended way to manage fresh content while keeping good SEO.

Server-Side Cache Control

To ensure visitors always see the newest version, configure server headers:

• Cache-Control: no-cache, must-revalidate
• ETag headers for resource versioning
• Content hash file names like style.123abc.css to automatically update when files change
  These server solutions work better than relying on JavaScript reload parameters.

Best Practice for Developers

• Use location.reload() without arguments for normal refresh tasks.
• Use cache-busting techniques or HTTP headers for hard reload needs.
• Test pages in multiple browsers to ensure consistent results.
• Avoid depending on deprecated features like the boolean argument in location.reload(true).

Summary Table

Share this post: on Twitter on Facebook