Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26557

Re: Dynamically add/remove code in browsers

Show key headers only | View raw

Leonardo Azpurua wrote:

>   var sc;
> 
>   function addHandler() {
>       var el = document.getElementById("test");
>       sc = document.createElement("script");
>       sc.id = "dynScript";
>       sc.type = "text/javascript";
>       // the value assigned to the script will be a rather large chunk of
> code imported by an httpRequest
>       sc.text = "function handleClick() { window.alert('Test clicked') }";

You should not clutter the global namespace.  Any global handleClick() 
function in the document or in memory will be overwritten/shadowed by that 
code.  Consider instead a user-defined globally accessible object that you 
use as namespace:

  var leo = {};

(“leo” then refers to that object.)

And in the script to be loaded:

  leo.handleClick = function () { window.alert('Test clicked') };

It may even be better if you have a property for each use-case.  Otherwise 
you would fill heap memory with inaccessible Function instances as the same 
property’s value is replaced.  Also consider JSONP.

In any case, you should move the part that inserts the “script” element to a 
separate function/method.

>       document.getElementsByTagName("head")[0].appendChild(sc);
>       el.onclick = handleClick;

You cannot assume that the script has been loaded and executed once you 
inserted the “script” element in the document.

You need to listen to and handle the “load” event of the “script” element:

  sc.onload = function () {
    el.onclick = handleClick;
  };

But it is presently unknown to me where this feature now standardized in 
HTML5 is supported.  Thus, it may be necessary to use setTimeout()-based 
polling to determine if execution has reached the end of the loaded script 
before you continue.

Also, you can use the “document.head” property if it is available:

  (document.head || document.getElementsByTagName("head")[0])
    .appendChild(sc);

It might be easier to use the backwards-compatible “document.body” property 
instead:

  document.body.appendChild(sc);

>   }
> 
>   function removeHandler() {
>       var el = document.getElementById("test");
>       el.onclick = null;
>       document.getElementsByTagName("head")[0].removeChild(sc);

If you are accessing the “script” element by object reference, so it does 
not need an ID.

> Does this sound like a right approach,

Only if the script you are loading is large and you can ensure that you can 
determine when execution has reached the end of the script.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Dynamically add/remove code in browsers "Leonardo Azpurua" <leonardo@exmvps.org> - 2015-01-12 05:22 -0430
  Re: Dynamically add/remove code in browsers Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-12 17:21 +0100
    Re: Dynamically add/remove code in browsers Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-01-12 16:44 -0200
      Re: Dynamically add/remove code in browsers Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-12 22:01 +0100
        Re: Dynamically add/remove code in browsers Joao Rodrigues <groups_jr-1@yahoo.com> - 2015-01-12 22:06 -0200
          Re: Dynamically add/remove code in browsers Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-13 01:11 +0100
    Re: Dynamically add/remove code in browsers "Leonardo Azpurua" <leonardo@exmvps.org> - 2015-01-12 15:21 -0430
      Re: Dynamically add/remove code in browsers Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-12 22:03 +0100
    Re: Dynamically add/remove code in browsers Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-01-13 12:17 -0200
      Re: Dynamically add/remove code in browsers Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-13 20:50 +0100

csiph-web