Reload JavaScript files without refreshing HTML

Question

I've a HTML which loads several Javascript files:

<script src="assets/js/a.js"></script>
<script src="assets/js/b.js"></script>
<script src="assets/js/jquery.min.js"></script>

As I debug/test my Javascripts in my browser's console, is it possible to reload these Javascript files without the need to reload the entire HTML page?

If you're debugging, you want to debug what the user experiences. If you just reload a script, you're starting from a different context then a user would. So reloading the entire HTML while debugging isn't such a bad thing. — huysentruitw
– huysentruitw, Commented Jun 3, 2012 at 6:12
good question. but it has already been asked and answered. Is there a way to refresh just the javascript include while doing development? — codeandcloud
– codeandcloud, Commented Jun 3, 2012 at 6:17
I think the problem during debugging is even worse: reloading the HTML using Ctrl+F5 fails to reload any of the asset files, such as .JS files, which may have changed. — David Spector
– David Spector, Commented Sep 11, 2020 at 15:32

PitaJ · Accepted Answer · 2013-09-02 23:21:55Z

19

You could remove and then re-add them:

$('script').each(function() {
    if ($(this).attr('src') !== 'assets/js/jquery.min.js') {
        var old_src = $(this).attr('src');
        $(this).attr('src', '');
        setTimeout(function(){ $(this).attr('src', old_src + '?'+new Date()); }, 250);
    }
});

edited Sep 2, 2013 at 23:21

answered Jun 3, 2012 at 6:21

PitaJ

15.4k6 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PitaJ Over a year ago

@Truth - he has a jquery script element in the question code!

codeandcloud Over a year ago

+1 to negate that -1. @Truth: 3 doesn't means all :) atleast at StackOverflow :) but PitaJ your code is buggy. 1. setTimeout wont does nothing in this code. 2. more importantly, replacing script wont work here. you can only add a new script Replacing script src using jquery not executed

Dirigible Over a year ago

I think you mean Date.now() instead of new Date()

Community · Accepted Answer · 2017-03-20 10:18:14Z

2

Nope (at least not without a hack), in fact - be very careful reloading so much. It's quite possible that your javascripts become cached, which leads to many-a-headache trying to debug, since your updates are not applying.

https://superuser.com/questions/36106/force-refreshing-only-javascript-files-in-firefox-and-chrome

edited Mar 20, 2017 at 10:18

CommunityBot

11 silver badge

answered Jun 3, 2012 at 6:12

Jordan Scales

2,7174 gold badges30 silver badges37 bronze badges

1 Comment

huysentruitw Over a year ago

You can always reload with Ctrl+F5, which will refresh the cache

Andras Sebo · Accepted Answer · 2016-04-27 08:57:45Z

1

Based on PitaJ's solution.

Reload all javascript in a function. You can call this from anywhere you want.

 $('script').each(function () {
        if ($(this).attr('src') != undefined && $(this).attr('src').lastIndexOf('jquery') == -1) {
            var old_src = $(this).attr('src');
            var that = $(this);
            $(this).attr('src', '');

            setTimeout(function () {
                that.attr('src', old_src + '?' + new Date().getTime());
            }, 250);
        }
    });

answered Apr 27, 2016 at 8:57

Andras Sebo

1,1408 silver badges20 bronze badges

Comments

Dariux · Accepted Answer · 2015-07-17 06:26:10Z

0

Tested with jQuery 2.0.3 and chrome 43

 function reloadScript(id) {

    var $el =  $('#' + id);

    $('#' + id).replaceWith('<script id="' + id + '" src="' + $el.prop('src') + '"><\/script>');
}

Chrome is complaining, but works:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Your script tag has to have id. Call in console:

reloadScript('yourid');

Does not remove event listeners, so for for example button click gets executed twice if once reloaded.

edited Jul 17, 2015 at 6:26

answered Jul 16, 2015 at 8:05

Dariux

4,25310 gold badges47 silver badges73 bronze badges

Collectives™ on Stack Overflow

Reload JavaScript files without refreshing HTML

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related