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

Groups > comp.lang.javascript > #26559

Re: Dynamically add/remove code in browsers

Show all headers | View raw

On 12/01/2015 14:21, Thomas 'PointedEars' Lahn wrote:
> 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);
> 

ACK.


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

However, what if there are other scripts in the document? And what if
the new script element already exists? Then, an ID would be of great
value to optimization.

All those questions would be better addressed by the following approach:
<http://calendar.perfplanet.com/2014/the-pain-of-duplicate-scripts/>

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    //js.src = "//localhost/test.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'dynScript'));


-- 
Joao Rodrigues

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