Path: csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!eu.feeder.erje.net!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Dynamically add/remove code in browsers
Date: Mon, 12 Jan 2015 17:21:53 +0100
Organization: PointedEars Software (PES)
Lines: 80
Message-ID: <11460823.sCPipJV62P@PointedEars.de>
References: <m905b3$90j$1@dont-email.me>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1421079734 2308 eJwFwYEBwCAIA7CXaqUo5wiD/09You3L65jLTaN5DwvUq00KeVpht9gxX2TwGlBkJJip6P4BDocQwA== (12 Jan 2015 16:22:14 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Mon, 12 Jan 2015 16:22:14 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwFwYEBgDAIA7CXAFvKzpkg/59gwic9W0gmuNxGqAa1W8lxhx0FeiCncL8uc3HiGBumvmb3lN7AYpf2Ay1IFHk=
Cancel-Lock: sha1:bD8lpk7c7FhwThQcAfL30j7JBwg=
X-NNTP-Posting-Host: eJwFwQcBADAIAzBLvHYghx38S1gCp/KsIBgYjBiTk8jaGdVPgH1haqPPhh08bLErscrg/gEFzhAW
Xref: csiph.com comp.lang.javascript:26557

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.