Should a "script" tag be allowed to remove itself?_问答_开发者

We've been having a discussion at our workplace on this with some for and some against the behavior. Wanted to hear views from you guys :

<html>
<body>
<div>
Test!
<script> document.body.removeChild(document.getElementsByTagName('div')[0]); </script>
</div>
</body>
</html>

Should the above script work and do what it's supposed to do? First, let's see what's happening here :

I have a javascript that's inside the <div> element. This javascript will delete the child node wit开发者_开发问答hin body which happens to hold the div inside which the script itself exists.

Now, the above script works fine in Firefox, Opera and IE8. But IE6 and IE7 give an alert saying they cannot open the page.

Let's not debate on how IE should have handled this (they've accepted it as a bug and hence fixed it in IE8). The point here is since the 'SCRIPT' tag itself is a part of DOM, should it be allowed to do something like this? Should it even exist after such an operation?

Edit:

Firefox, Opera, IE9 etc. do not remove the 'script' tag if I run the above code. But, document.getElementsByTagName('script').length returns 0!

To understand what I mean, add alert(document.getElementsByTagName('script').length); before and after document.body.removeChild(document.getElementsByTagName('div')[0]); in the code above.

If the question is, "should a script tag be allowed to remove itself?" I would think so. After all, a script tag can cause the browser to navigate to another page, in which case the entire page (including such script tag) is removed from memory.

An example where self removal can be handy is, for example, some long polling techniques that would certainly make the DOM large after a few minutes.

JavaScript frameworks add and remove script elements as part of their daily routine.

E.g. getScript() in jQuery places a script tag in the document head and removes it right after evaluation.

They do this to keep the DOM clean - else the tags would just build up unnecessarily. They are no longer needed after evaluation.

The only drawback I see with this is debugging - for example, Firefox with Firebug seems to be lost as to the whereabouts of such scripts and cannot find the source lines. (As of this writing.)

Actually you can do this:

var currentScript;
currentScript = document.currentScript || document.scripts[document.scripts.length - 1];
currentScript.parentNode.removeChild(currentScript);

The script is removing the DIV from the document DOM tree, and just so happens to remove the script declaration itself (after it has been loaded). So I think it should be allowable as a feature.

Also, the script tag will exist until it is loaded and the Javascript is interpreted and executed. At execution, the DIV (and SCRIPT) tag will be removed from the DOM tree and exist only as objects that will be garbage collected.

EDIT

I think the major point here is that a SCRIPT tag only creates the Javascript objects and places them in memory in the Javascript runtime engine (which is completely different from the DOM). Once the interpreter has finished reading the SCRIPT tag, it's no longer needed and can be discarded (removed from the DOM).

If the interpreter was instructed (by the JS code) to create references to OTHER objects in the DOM (e.g. as the handler for a button click), then the Javascript function will still be accessible. Any functions called from that event handler will ALSO be accessible. In this way, you can "walk" the call stack from the button->handler->other functions/variables.

Yes, it's a valid behavior since script only removes DOM representation of itself. It does not removes itself this way. Actually, script can replace own text representation on the page with something entirely different without being re-run.

Example:

var s = document.createElement('script');
s.textContent = 'alert("Hello, world!");'+
                'document.currentScript.textContent="alert(1)";';
                // BTW, behavior is the same for innerHTML
document.body.appendChild(s);

However, there are almost no valid reasons to make script remove itself or change own code unless you want to keep things in the DOM clean. Also, this won't hide your code from anyone willing to look at it. Usually it means you had to add the script from some other code and it's better to use something like document.body.removeChild(s); from that other script anyway.

Using JQuery (over 10.0.1) can make the next:

<!-- you call first to jquery -->
<script id="autoremove">
      $(function(){
           //your operations
                //action
                //action
           //remove the script
           $("#autoremove").remove();
      });
</script>