Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page is reloaded using location.reload().

Upon inspecting the elements in Chrome, I noticed that the page reloads all JavaScript and font files from the server instead of the cache. My goal is to have the page reload without fetching all the auxiliary elements again. It is interesting to note that some files (such as jQuery) return a 304 Not Modified message and do not get re-downloaded. Similarly, PNG files hosted on my own server also return a 304 Not Modified response.

Is there a way to configure the server so that when using location.reload(), only the main page is reloaded and not the additional files like fonts, scripts, or CSS? I believe this might be related to an Apache configuration setting. My current setup includes Apache 2.4.9 as part of Bitnami's Lampstack version 5.4.30-0.

javascriptjquerycssapachecookies

Answer №1

When using the reload() method, content is reloaded from the browser cache initially. To force a reload from the server, set the forceGet parameter to true like so: location.reload(true);

In your scenario, it's important to establish expiration times for CSS, JS, images, and fonts either in the .htaccess file within the web directory or in Apache's virtual host file.


<IfModule mod_expires.c>
  ExpiresActive on

# It might be more effective to specify expires rules individually
  ExpiresDefault                          "access plus 1 month"

# For caching appcache that requires re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# Expiry settings for various document types
  ExpiresByType text/html                 "access plus 0 seconds"

# Data files
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# RSS feed expiry
  ExpiresByType application/rss+xml       "access plus 1 hour"

# Favicon expiry (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week"

# Media expiry: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files (for CSS3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfont expiry
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript expiry
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

</IfModule>

For further information, visit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you pass an authorization token in a Next.js post request when using Django REST framework?

Is there a way to successfully pass a Django authorization token in Next.js using Axios? I attempted this method, but encountered a 404 error. let token = "Token 8736be9dba6ccb11208a536f3531bccc686cf88d" await axios.post(url,{ headers ...

javascriptreactjsdjangonext.jsfetch-api

Just starting out with JS, curious if it's possible to transform these circles into diamonds instead

My goal is to transform this animated field of blinking circles into rectangles or diamonds, whichever is easier. Link: http://jsfiddle.net/Jksb5/1/ HTML <canvas id="pixie"></canvas> JS var WIDTH; var HEIGHT; var canvas; var con; var g; va ...

javascriptjquerycanvas

Adding a subtle gradient to the image, just ahead of the SVG

Is there a way to achieve this particular look? https://i.stack.imgur.com/yQjvK.png I'm currently encountering this appearance issue. https://i.stack.imgur.com/eQjQ4.png Any suggestions on how I can make it match my desired outcome? Your assistan ...

htmlcssimagesvg

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

javascripthtmlcss

Can Chrome Support Bookmarklets?

While attempting to craft a bookmarklet in Chrome using the console, I encountered the following error: Refused to load the script 'https://code.jquery.com/jquery-1.6.1.min.js' because it violates the following Content Security Policy directive: ...

javascriptjquerygoogle-chrome

Troubleshooting PHPMailer error handling issue during ajax requests while successfully delivering emails

Encountering an issue with PHPMailer that seems to be puzzling me. A simple form has been set up with AJAX and PHP, where the input values are sent to PHP for validation. Once approved, PHP collects all relevant data (name, email, message, etc.) and creat ...

phpjqueryajaxtwitter-bootstrapemail

Utilizing Android's advanced feature of overlapping buttons to create multiple states

I'm currently developing a Piano app for Android. In my XML layout, I have created two rectangular buttons representing white and black keys. The challenge I'm facing is getting the black key to overlap the two white keys, similar to how a real p ...

androidcssxmlandroid-layoutandroid-button

Switching from real pixels to CSS pixels

The details provided in Mozilla's documentation on elementFromPoint clarify that the coordinates are specified in "CSS pixels" rather than physical pixels. This raises a question about what exactly CSS pixels entail. Many assume that a pixel in CSS is ...

css

Seamless integration of Applitools with WebdriverIO

Seeking assistance to integrate Applitools with my WebdriverIO project. Find the specifications below: Node Version: v12.18.2 NPM Version: 6.14.5 WebdriverIO Version: 6.3.6 The service in my wdio file is configured as follows: services: ['selenium-s ...

javascriptnode.jsnpmwebdriver-ioapplitools

What is the best way to set up multiple routes for a single component in React

I am currently using Vue 2 in my project and have set up the following routes: const routes = [ { path: "/suites", component: Home, }, { path: "*", component: LandingPage, }, ]; Now, I need to include an additi ...

javascriptvue.js

Having trouble with Route Param in React after deploying the application to an Apache server

I am facing an issue with my React app that uses react-router. I have included router params in my Routes, and while it works fine locally, the link with route params is not working once deployed on an Apache server. Can someone assist me in resolving this ...

javascriptreactjsreact-router

Is there a way to use lodash to convert an array into an object?

Below is an array that I am working with: const arr = [ 'type=A', 'day=45' ]; const trans = { 'type': 'A', 'day': 45 } I would appreciate it if you could suggest the simplest and most efficient method to ...

javascriptlodash

What is the best way to design an HTML table that features alternating colors for each row and column?

I recently came across this image showcasing a beautifully designed table: https://i.stack.imgur.com/6K63q.png The current HTML code I have applies colors to every even line, including the year columns and subcolumns. Is there a way to assign unique mixe ...

htmlcss

Click on the text within a paragraph element

Is there a way to retrieve the selected text or its position within a paragraph (<p>)? I'm displaying a text sentence by sentence using a Vue.js loop of paragraphs. <p class="mreadonly text-left mark-context" v-for="line in ...

javascriptvue.jsbootstrap-vue

Positioning two distinct Div elements using CSS

In an attempt to align two lists within a div, I have one list containing .jpg files and another with text files. <!DOCTYPE html> <html> <style> .left{height:auto; float:left;} .right{height:auto; float:right;} </style> &l ...

htmlcss

Utilizing Angular and TypeScript: The best approach for managing this situation

I need some guidance on handling asynchronous calls in Angular. Currently, I am invoking two methods from a service in a controller to fetch an object called "categoryInfo." How can I ensure that these methods return the categoryInfo correctly and displa ...

javascriptangularjsasynchronoustypescript

Creating unique geometric designs with three.js

Attempting to construct a polygon in three.js and here is the code used for it. function DeployZone(coordinatesList) { // Forming the polygon Shape { var material = new THREE.MeshLambertMaterial({ color: 0x00ffcc }); var faces = [0, 1, 2, 3, 4] ...

javascriptthree.js3dgeometry-surface

What is the best way to retrieve a date (value) from a DatePicker and then set it as a property in an object

I am currently utilizing the react-datepicker library, and I have a question about how to retrieve a value from the DatePicker component and assign it to the date property within the Pick object. Extracting data from regular input fields was straightforw ...

javascriptreactjsecmascript-6datepicker

Update the function to be contained in a distinct JavaScript file - incorporating AJAX, HTML, and MySQL

Currently, I am working on a project and need to showcase a table from MySQL on an HTML page. The JavaScript function in my code is responsible for this task, but due to the Framework 7 requirement, I must separate the function into a different .js file ra ...

javascripthtmlmysqlajax

Addressing Memory Leakage Issues in a Basic Node.js Application

Out of sheer curiosity and as an experiment with NodeJS, I decided to write a basic program to test the Collatz Conjecture for an incredibly high number of integers. While this concept should work fine in theory, my simple code is unexpectedly facing a mem ...

javascriptnode.jsmemory-leaks