How to dynamically remove all unwanted CSS and JS from page

Question

I have an amateur sports website to maintain and I am not an expert in web development. The pages I can put on the website can only be in the form of predefined templates, something similar to wordpress.

The main website loads it's own CSS files and JS files which we do not want as it interferes with our customisations. These files change as and when the main administrators/developers deploy new ones to the main/parent website.

I want to dynamically block loading of all CSS files and JS files that are not ours and instead use our own custom CSS and JS files.

Currently I am doing something like this below, but as you can see I will have to update the file names whenever they change to something else and I would not know when they change unless I notice the difference on the webpages.

<script type="text/javascript">
  $('link[rel=stylesheet][href="/assets/application-b51e2731e0d53e4d422.css"]').remove();
  $('link[rel=stylesheet][href="/assets/print-a622ffc90d1232b126e42c.css"]').remove();
  jQuery('head script[src*="application-7fd426f9bca208.js"]').remove();
</script>

Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?

Possibly write a php function - depends on your framework i guess? — Chris
– Chris, Commented Jan 14, 2015 at 15:06
It's extra overhead but depending on your limitations you can add a CSS reset after their files are loaded. Example — sareed
– sareed, Commented Jan 14, 2015 at 15:09
First of all, removing script tags won't prevent them from running. — Ginden
– Ginden, Commented Jan 14, 2015 at 15:18
@slime scripts are loaded and run just as soon as the <script> tag is seen. By definition, if the script exists (such that it could be removed) it must already have been loaded. — Alnitak
– Alnitak, Commented Jan 14, 2015 at 15:27

Waxi · Accepted Answer · 2015-01-14 15:25:05Z

1

Instead of worrying about tracking file names, why not just target anything that's not yours?

$('link').not('.myLink').remove();

And just make sure you drop that class on your link:

<link rel="stylesheet" href="path.css" class="myLink" />

answered Jan 14, 2015 at 15:25

Waxi

1,6512 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rhanabe Over a year ago

this works fine. Any suggestions to remove .js file?

Waxi Over a year ago

Apparently it's not possible to unload JS from browser memory. If their JS is conflicting with yours, then you could just namespace your code, but if their JS is affecting your CSS, then you're gonna have to write JS to nullify the values/functions/whatever found in their JS.

Collectives™ on Stack Overflow

How to dynamically remove all unwanted CSS and JS from page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related