How to indicate to browser that javascript (external) has been changed

Question

The advantage of including js on web page is that I need not to worry about cached js file. If I change it on the server, the same will be reflected on client side. But it increases the size and complexity of webpage. It also affects average response time.

But if I make a separate js, so it could be saved at client side on first request, client needs to remove cached js when I do some changes in js at server side.

Is there any way (some HTML tag or attribute) to indicate to the browser that js file has been changed at server side. So it downloads the new copy. Or something like versioning.

Answer 1

Use a made up query string attached to the end of the file name. Browsers think the file is new and download it. The query string does not affect the file.

So <script type="text/javascript" src="your.js?123"></script>

Answer 2

This is what version numbers are good for. If you include your file with a version number in the file name (like jquery-1-5-1.min.js), then later when a new version of the file is deployed you update with the new version number (like jquery-1-6-0.min.js), then you don't have to worry about the caching.

Answer 3

<script>

    var ts = new Date().valueOf();//creating timestamp
    var newScript = document.createElement('script'); //creating script tag
    newScript.type = 'text/javascript';
    newScript.src = 'jquery-1.3.2.min.js?'+ts;// reference to jS with timestamp as a query string
    document.body.appendChild(newScript);//appending it to dom
    </script>

Add this script tag to body. Every time JS will be updated a fresh file.