how to reload javascript file

Question

I have a question about reloading JavaScript files. I develop web pages front-ends and do a lot of coding in JS. Every time when I want to check an application's flow is correct (or do some debugging) I have to hit F5 key to reload whole page and it's scripts, and I have to wait. Waiting time depends on page's weight and sometimes I get impatient. Therefore I wonder if there is any way to reload only changed script file *.js? or maybe there is some plugin for Chrome to reload chosen script? It could be a very handy way to ease development. Thank you for replies.

this one uses jQuery, it is here for example:

var scs=$('script[type*=javascript]');
var scsl = scs.length;
var scsi = 0;
var o = [];
var oi = 0;
var ol = 0;
var s = '';
var fws = 0;
var sws = 0;
var v = {};

function i1(){
fws = window.setInterval(function(){
        v = $(scs[scsi]);
        
        s = v.attr('src');
        if(typeof s!='undefined' && s.indexOf('http')==-1 && s.indexOf('index')==-1){
                console.log([scsl,scsi,s]);
                o.push({src:s});
                v.remove();
        }

        if(scsi==scsl){
                console.log(o);
                window.clearInterval(fws);
                ol = o.length;
i2();
        }
        else{
                scsi++;
        }
},800);
}

function i2(){
                sws=window.setInterval(function(){
                        v = o[oi];
                        sc = $('<script>').attr({type:'text/javascript',src:v.src+'?t='+(new Date().getTime())});
                        console.log([ol,oi,v.src]);
                        $('head').append(sc);

                        if(oi==ol-1){
                                window.clearInterval(sws);
                        }
                        else{
                                oi++;
                        }
                },800);

}
i1();

If possible one way to speed up your js developing is using online tools like jsfiddle or jsbin. Then you won't have to reload an entire page and just work on your scripts individually and then implement them to your site. — Paparappa, Dec 01 '11 at 12:54

score 4 · Accepted Answer · answered Dec 01 '11 at 12:49

4

As far as I know, there is no way to to do that. The problem is, you just cannot unload a script from a page, once it was evaluated.

Even if you remove the <script> node, it will not change the behavior. It might be possible with some third-party plugin for instance, but I'm almost sure its not possible with any vanilla js implementation.

Of course you could just load the same script file from your server and execute (eval) it, but again, you still didn't unload the previous code which could lead to very unexpectable behavior.

So, you have to keep your F5 key on its toes.

answered Dec 01 '11 at 12:49

jAndy

231,737
57
305
359

Thank you for Your reply, it is that You are correct. I talked to my colleague and he wrote in no time a simple function which removes all – Marecky Dec 05 '11 at 12:10

score 0 · Answer 2 · edited Apr 29 '18 at 19:47

In Dojo or CommonJS based frameworks its not a problem at all. Javascript code is usually hold in a module.

In our web-based IDE we reload scripts all the time like this (@reloadCustomMobileStack) :

define([
    'dojo/_base/declare',
    'require'
], function(declare,require)
{
    return dojo.declare("xappstudio.manager.DynamicScriptMixin", null,
    {
        _reloadModule:function(module,reload)
        {
            require.undef(module);
            var scripts = document.getElementsByTagName('script');
            for (var i = scripts.length - 1; i >= 0; i--)
            {
                var script = scripts[i];
                if (script.getAttribute('src') && script.getAttribute('src').length > 0 && script.getAttribute('src').indexOf(module)!=-1)
                {
                    script.parentNode.removeChild(script);
                    break;
                }
            }

            if(reload)
            {
                require([module], function(_moduleIn)
                {
                    console.error('got module' + _moduleIn);
                });
            }
        },
        reloadCustomMobileStack:function()
        {
            var modulesToReload = [
                'cxapp/delegates/BootDelegate',
                'cxapp/delegates/FormDelegate',
                'cxapp/delegates/HeaderToolbarDelegate',
                'cxapp/delegates/ImageResizeDelegate',
                'cxapp/delegates/ServiceDelegate',
                'cxapp/delegates/UrlDelegate',
                'cxapp/manager/Context',
                'cxapp/manager/CustomApplication',
                'cxapp/manager/DataManager',
                'cxapp/types/Types',
                'cxapp/utils/RPCProxyPOSTEnvelope'
            ];

            for(var i = 0 ; i < modulesToReload.length ; i++)
            {
                this._reloadModule(modulesToReload[i],true);
            }

        }
     });
});

In order to use require.undef(module), you need to add this here to your Dojo config: has:{'dojo-undef-api': true}

Of course that won't work with any Javascript since Dojo/Common-JS Javascript is different but enables you also a kind of dependency injection or resolving.

score 0 · Answer 3 · answered Jan 12 '12 at 22:20

You might try the new Scratchpad feature in Firefox (I think it's been in releases since 7.0).

When I'm revving hard on a new piece of javascript I do it in the scratchpad and then copy out to my editor when I like it. Basically, I do all my work in functions and objects that can be redefined on the fly (doesn't everyone?). This way I can just re-run the function definition or reassign an objects method/data and it's a lot faster than waiting for refresh cycles.

how to reload javascript file

3 Answers3

Linked