ansaurus

Question

Is there a way to "hot swap" JavaScript code within the browser?

Answer 1

A:

If you want to do this with entire JavaScript files, see this question for something similar enough that you should be able to get the basics of the idea.

Jason Bunting 2008-10-16 05:23:09

Answer 2

+2 A:

I'm not familiar with HotSport, but if you're talking about dynamically loading JavaScript, yes, you can do that. MooTools allows you to do that, as do jQuery, Prototype, Dojo, and YUI, and I'm sure most of the other frameworks do as well. You can also do it with native JavaScript.

VirtuosiMedia 2008-10-16 05:25:09

Answer 3

+1 A:

im sure not too many people here know what you mean by hot swap but as virtuosiMedia said mootools allows that, if you dont trust mootools that much then there's a same plugin for jquery and still if you dont want frameworks you could always add those scripts via dom

but i'm sure you are not allowed to alter the head level scripts you've already defined as any scripts dynamically added through DOM is only body level

lock 2008-10-16 05:29:05

I have added a clarification, let me know if it's better.

kolrie 2008-10-16 05:42:55

Answer 4

+1 A:

Interesting idea :)

I wrote the following bookmarklet:

function reload(){var scripts=document.getElementsByTagName("script");var head=document.getElementsByTagName("head")[0];var newScripts=[];var removeScripts=[];for(var i=0;i<scripts.length;i++){var parent=scripts[i].parentNode;if(parent==head&&scripts[i].src){var newScript={};newScript.src=scripts[i].src;newScript.innerHTML=scripts[i].innerHTML;newScripts.push(newScript);removeScripts.push(scripts[i]);}}for(var i=0;i<removeScripts.length;i++){head.removeChild(removeScripts[i]);}for(var i=0;i<newScripts.length;i++){var script=document.createElement("script");script.src=newScripts[i].src;script.type="text/javascript";script.innerHTML=newScripts[i].innerHTML;head.appendChild(script);}}

add that to the location of a new bookmark, and it will reload all the javascripts referenced in <head>. Not sure how well this will work in practice, but it was worth a shot :) I guess you'd have to be very careful in the way you write your scripts, so as not to have things added to the page body multiple times, etc. Maybe support for a 'reload="true"' attribute could be useful, that way you could tag only your libraries as reloadable.

Full source:

function reload() {
    var scripts = document.getElementsByTagName("script");
    var head = document.getElementsByTagName("head")[0];
    var newScripts = [];
    var removeScripts = [];
    for(var i=0; i < scripts.length; i++) {
     var parent = scripts[i].parentNode;
     if(parent == head && scripts[i].src) {
      var newScript = {};
      newScript.src = scripts[i].src;
      newScript.innerHTML = scripts[i].innerHTML;
      newScripts.push(newScript);
      removeScripts.push(scripts[i]);
     }
    }

    for(var i=0; i < removeScripts.length; i++) {
     head.removeChild(removeScripts[i]);
    }

    for(var i=0; i < newScripts.length; i++) {
     var script = document.createElement("script");
     script.src = newScripts[i].src;
     script.type = "text/javascript";
     script.innerHTML = newScripts[i].innerHTML;
     head.appendChild(script);
    }
}

Erlend Halvorsen 2008-10-16 08:25:45

ansaurus

tags:

views:

answers:

Is there a way to "hot swap" JavaScript code within the browser?

related questions