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
– Paparappa, Commented Dec 1, 2011 at 12:54

jAndy · Accepted Answer · 2011-12-01 12:49:58Z

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 1, 2011 at 12:49

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

1 Comment

Marecky Over a year ago

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 <script> tags, remembers its 'src' attributes and attach script tags again. We did some experiments. Changed scripts are evaluated again. But removing scripts isn't enough, so I though that all window object's properties should be found and deleted. But this is just a philosophy ;) Thanks for the answer. I will post that function below just for anybody who is curious.

Hovis Biddle · Accepted Answer · 2012-01-12 22:20:35Z

0

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.

answered Jan 12, 2012 at 22:20

Hovis Biddle

8899 silver badges15 bronze badges

Comments

Aliaksandr Sushkevich · Accepted Answer · 2018-04-29 19:47:38Z

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.

Collectives™ on Stack Overflow

how to reload javascript file

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related