Dynamically Remove JavaScript (using JavaScript!)
Posted: Thu Aug 10, 2006 2:50 pm
Weirdan | Please use
This works, but now I'm trying to figure out how to unload these scripts, client-side. Once again, pseudocode:
Technically, this works. I've done the debugging, and each line of code in the removal process operates as desired, on the correct objects. However, the functions defined in the "extra" file still appear to be in memory, because references to them continue to function. Example:
Given an A with onclick="includedFunction();", on a page with no definition for includedFunction()
Weirdan | Please use
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
I'm writing an app that, among other things, will load segments of other pages (served up via AJAX). Because you can't just drop a <script> block into a <div> and have it work, I have PHP parse out <script> blocks (either embedded or included) and include the relevant information in the XML. The JavaScript will then loop through the XML and dynamically load any JS used by the remote page, using something along these lines:
[syntax="javascript"]// pseudocode
foreach(scriptentity as script)
{
var tag = doc.createElement("SCRIPT");
tag.type = "text/javascript";
tag.id = randomString(16); // <script> doesn't support an actual ID (so no doc.getElementById()), but I can still use it to identify this block
window.extrascripts.push(tag.id); // register this id as a dynamically-loaded script, for unloading later
if(script.type == "embed") tag.innerHTML = script.contents; // in the case of a non-empty script tag, simply dump the actual JS into the new tag
else
if(script.type == "include") tag.src = script.src // in the case of an external file, the contents will be equal to the SRC attribute from the original document
doc.head.appendChild(tag);
// at this point, any functions defined in the original document, either via embedded code or an external file, will be available to this page, and no one's the wiser
}Code: Select all
foreach(extrascripts as sScriptID)
{
var h = doc.head;
var scripts = h.getElementsByTagName("SCRIPT");
for(i = 0; i < scripts.length; i++)
if(scripts[i].id && scripts[i].id == sScriptID)
h.removeChild(scripts[i]);
}Given an A with onclick="includedFunction();", on a page with no definition for includedFunction()
- click the A; nothing happens (because the function doesn't exist)
- click a button that triggers my "load extra script" function; I am notified that the script has been loaded
- click the A again; the function includedFunction pops up an alert dialog (which is what it should do)
- click a button that triggers my "remove extra script" function; I am notified that the script has been identified and removed
- click the A a third time; the function includedFunction continues to work, even though the file that defines it is no longer a part of this document
Weirdan | Please use
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

