Cargar <script> y luego eliminarlo

cronosmen · #1 (**permalink**) 20/02/2012, 06:55

Buenas compañeros, escribo este post para ver si me podeis orientas o echar una mano.

Lo que estoy haciendo es un sistema de widgets con lo cual necesito usar javascript nativo (para no estar cargando librerias en paginas ajenas y crear conflictos si usan jquery, mootools...), la llamada al widget es una simple llamada:

<script type="text/javascript" src="http://www.direccion.com/wblogs_lista.get.js"></script>

Esa llamado la trato donde get por ejemplo es el callback y me genera otro

<script id="loaded" type="text/javascript" src="http://www.direccion.com/wblogs_lista.get.js?encode=html"> en el que ya tengo el JSON y el callback se ejecuta, lo que me gustaria es poder eliminar este ultimo <script> del dom para que solo quede la llamada inicial. El segundo <script> lo genero así:

Código Javascript:

Ver originalwidget.prototype.loadscript = function() {
        //JS
        curScriptTag = document.createElement('script');
        curScriptTag.type = 'text/javascript';
        curScriptTag.src = "http://www.direccion.com/#name_widget#.#myfuncion#.js?encode=html";
        curScriptTag.id = "loaded";
        document.getElementsByTagName("head")[0].appendChild(curScriptTag);
        //END JS
        //CSS
        curCSScriptTag = document.createElement('script');
        curCSScriptTag.type = 'text/css';
        curCSScriptTag.src = "http://statics.direccion.com/widgets/css/#name_widget#.css";
        curCSScriptTag.id = "loaded";
        document.getElementsByTagName("head")[0].appendChild(curCSScriptTag);
    }

con esto cargo el callback y otro script para el css, como podría eliminar estos una vez cargados para dejar el dom con la llamada inicial?

ryugen · #2 (**permalink**) 20/02/2012, 07:02

Lo que deberías hacer es apuntar todo tu código a un objeto y luego destruirlo o anularlo (asignarle NULL).

En tu caso tienes :

Código Javascript:

Ver originalwidget.prototype.loadscript = function() {
 
        //JS
 
        curScriptTag = document.createElement('script');
 
        curScriptTag.type = 'text/javascript';
 
        curScriptTag.src = "http://www.direccion.com/#name_widget#.#myfuncion#.js?encode=html";
 
        curScriptTag.id = "loaded";
 
        document.getElementsByTagName("head")[0].appendChild(curScriptTag);
 
        //END JS
 
        //CSS
 
        curCSScriptTag = document.createElement('script');
 
        curCSScriptTag.type = 'text/css';
 
        curCSScriptTag.src = "http://statics.direccion.com/widgets/css/#name_widget#.css";
 
        curCSScriptTag.id = "loaded";
 
        document.getElementsByTagName("head")[0].appendChild(curCSScriptTag);
 
    }

Entonces una vez utilizada esta función:

Código Javascript:

Ver originalwidget.prototype.loadscript = null

De esta manera estas perdiendo el puntero a tu función por lo que el interprete de JavaScript tarde o temprano debería liberar la memoria ocupada por el script anterior. Sin embargo no tengo tanto conocimiento como para saber en que momento esto se hará.

cronosmen · #3 (**permalink**) 20/02/2012, 07:13

Mmm gracias por responder! pero no me funciono :( no se si es por el interprete tarda bastante en liberar memoria o por que lo hice mal, realmente me gustaría que el código quedará limpio y ágil una vez cargado el script removerlo del dom, no habría una forma de controlar esto por eventos o algo así? perdon si pido mucho y sobretodo gracias por tu ayuda

ryugen · #4 (**permalink**) 20/02/2012, 07:33

puedes pegar el código en contexto de como lo estas haciendo?

cronosmen · #5 (**permalink**) 20/02/2012, 07:41

Este es el html que uso:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" src="http://www.direccion.com/wblogs_lista.get.js"></script>
</head>
<body>
<div id="mywidget"></div>
</body>
</html>

Este el javascript final:

Código Javascript:

Ver originalvar widget = function (){
 
    widget.prototype.get = function (JSON){
        capa = document.getElementById('mywidget').innerHTML = JSON.html;
    }
 
 
    widget.prototype.loadscript = function() {
        //JS
        var curScriptTag = document.createElement('script');
        curScriptTag.type = 'text/javascript';
        curScriptTag.src = "http://w.direccion.com/widget.get.js?encode=html";
        curScriptTag.id = "loaded";
        document.getElementsByTagName("head")[0].appendChild(curScriptTag);
        //END JS
        //CSS
         var cssLink=document.createElement("link");  
         cssLink.setAttribute("rel", "stylesheet");  
         cssLink.setAttribute("type", "text/css");  
         cssLink.setAttribute("id", "loaded");  
         cssLink.setAttribute("href", "http://statics.direccion.com/widgets/css/widget.css");  
         document.getElementsByTagName("head")[0].appendChild(cssLink);  
    }
    
    var a = this.loadscript();
};
widget = new widget();

La primera llamada esta genera el código de arriba un php hace un echo para llamar al callback asi:

widget.get({html:'......}).. //esto es el JSON que uso en el callback que en este caso es get