Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 912
Alon Gubkin Avatar asked May 02 '12 11:05

Alon Gubkin


People also ask

How do I remove the DOM script element?

We can remove a script from the DOM by scanning through all scripts on the page, getting the parent node of that script, and then finally removing the child of that parent node.

How do I stop a script in HTML?

Start typing javascript , select Disable JavaScript, and then press Enter to run the command. JavaScript is now disabled.

Is it optional to close the script tag?

Dynamic script such as text/javascript . None, both the starting and ending tag are mandatory.

How are script tags executed?

Script tags are executed in the order they appear It also means scripts which appear later on the page can depend on things scripts which appear earlier have done. Elements on the page won't render until all the script tags preceding them have loaded and executed.


1 Answers

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.

like image 116
Esailija Avatar answered Sep 29 '22 15:09

Esailija