2009-04-05 13 views
2

Ich benutze Prototyp, um externe js-Datei (eigentlich ist es PHP-Datei) dynamisch zu laden. So:Dynamische Laden einer js-Datei mit Prototype?

function UpdateJS(file) 
{ 
    var url = 'main_js.php?file='+file; 
    var myAjax = new Ajax.Request(url, {method: 'get', onComplete: showResponseHeader}); 
} 
function showResponseHeader (originalRequest) 
{ 
    $('jscode').innerHTML = originalRequest.responseText; 
} 

Container "jscode" wie folgt definiert ist:

<script type="text/javascript" id="jscode"></script> 

Und es funktioniert! Wenn jedoch eine andere Datei aufgerufen wird, bleiben alle Funktionen der vorherigen Datei erhalten. Und das will ich nicht. Jeder weiß, wie man die erste js-Datei "entlädt", wenn der zweite aufgerufen wird?

(Ich habe auch versucht Ajax.Updater Funktion, aber das Ergebnis ist das gleiche verwenden.)

Update: Es stellt sich heraus, dass es größeres Problem: es lädt nur, wenn die Funktion „UpdateJS“ ist in window.onload deshalb lädt es danach nichts mehr. Also Prototypen aktualisieren es ist vielleicht nicht so ein guter Weg für diese ...

Antwort

2

Es gibt ein großes Tutorial, wie man dynamisch entladen hier Javascript und CSS:

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

Der Code unten aus dem obigen Link entlehnt ist, es ist eine reine JS Lösung, kein Prototyp JS ein, aber sollte es tun:

function removejscssfile(filename, filetype){ 
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from 
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for 
var allsuspects=document.getElementsByTagName(targetelement) 
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove 
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) 
    allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild() 
} 
} 

removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page 
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page 

Wenn Sie nicht über die CSS benötigen Funktionalität zu entfernen, ich bin sicher, dass Sie es weg hacken.

+0

ich auch eine Lese darüber hatte, das Problem zu sein scheint, dass es das Skript Knoten entfernt, aber nicht tatsächlich die definierten Eigenschaften aus dem Speicher, und das war der Punkt, nicht wahr? –

+0

Nein, eigentlich ist es nicht. Aber ja, ich dachte, das wäre das Problem. Wenn meine neue .js-Datei eine Funktion lädt, die den gleichen Namen wie in der ersten .js-Datei hat, wird sie die zweite verwenden, und das ist, was ich wollte. – domagojk

1

Ich glaube nicht, dass Sie eine Reihe von Eigenschaften im Rahmen einer Datei definiert entladen können. Ein Workaround wäre, die Funktionen in jeder Datei in einem zentralen Objekt zu definieren, die Sie aussortieren (oder überschreiben), wenn Sie sie loswerden wollen.

0

Versuchen Sie Folgendes:

function UpdateJS(file) 
{ 
    $('jscode').innerHTML = ''; /*YOU NEED TO RESET THIS*/ 
    var url = 'main.js'; /*YOU CAN USE A JAVASCRIPT FILE*/ 
    var myAjax = new Ajax.Request(url, {method: 'get', onComplete: showResponseHeader}); 
} 
function showResponseHeader (originalRequest) 
{ 
    $('jscode').innerHTML = originalRequest.responseText; 
}