Jquery – How to remove script elements before they are being executed

jquery

How can I remove script elements before they are being executed?

I thought about using the DOMNodeInserted event, but apparently it doesn't catch script elements. I've also tried using the jQuery livequery plugin like that:

$("script").livequery(function () { 
    $(this).remove();
});

It did remove the script element, but after it was executed.

I'm looking for a cross-browser solution, but I'm not even sure if that's possible. I read about Mutation Observers which seems close enough but I'm not sure if it can solve my problem.

It would be even better if there was a way to modify the script content before it is being executed without removing and recreating it.

Best Solution

Removing a script element does not do anything. If you can somehow access a script element, it was executed a long time ago and removing it will have no effect.

So we need to work around it. If your script element is at the top of the page like this:

<head>
    <script src="yourscript.js"></script>

You could make a synchronous ajax request to the same page, so you can parse its content into a new document, modify all script tags and then replace the current document with the modified document.

var xhr = new XMLHttpRequest,
    content,
    doc,
    scripts;

xhr.open( "GET", document.URL, false );
xhr.send(null);
content = xhr.responseText;

doc = document.implementation.createHTMLDocument(""+(document.title || ""));

doc.open();
doc.write(content);
doc.close();


scripts = doc.getElementsByTagName("script");
//Modify scripts as you please
[].forEach.call( scripts, function( script ) {
    script.removeAttribute("src");
    script.innerHTML = 'alert("hello world");';
});

//Doing this will activate all the modified scripts and the "old page" will be gone as the document is replaced
document.replaceChild( document.importNode(doc.documentElement, true), document.documentElement);

Unfortunately this cannot be set up in jsfiddle or jsbin. But you should be able to copy paste this code exactly as it is into this page's console in google chrome. You should see the alerts and when you inspect the live dom, each script was modified.

The difference is that we are running this after scripts have been executed on the page, so the old scripts should still have a working effect on the page. That's why, for this to work, you need to be the very first script on the page to do it.

Tested to work in google chrome. Firefox is completely ignoring the doc.write call for some reason.

Related Question