Skip to main content
ocean waves

Blog Post

Remove or replace JS/CSS from a page

Have you ever needed to remove a JS or CSS file in certain conditions such as a custom themed page? In Drupal 6 that has become a whole lot easier.

On a recent project there was a need to strip a couple page views down to a extremely basic output that was to be used in an iframe. For various reasons I didn't want any extraneous module included JS or CSS files included and while Drupal is good at only loading what is needed there are a few exceptions. For example one module that is almost always found on a Drupal site is the Administration menu module which makes all administrators lives a little easier. While a boon most of the time in this case I needed to get rid of those helpful little menus as it obstructed the output that would be displayed in that tiny iframe for anyone having permissions to see the Admin Menus.

There are a couple of ways to accomplish this but since I also needed to strip some other module added javascript and CSS files out as well I started asking myself if I had seen this done in any other module or not. In this project I had been working with several jQuery related modules and the jQuery Update module instantly came to mind. This module replaces the core jQuery js file with it's own so I started poking around in the module to see how it was being done.

jQuery Update removes the core jQuery JS from the $variables['scripts'] array and adds in it's own updated js file. This is a very elegant solution to overriding core or module specific js files if you have a need to. In my case I wanted to simply drop the admin_menu.js file from the $variables['scripts']  array as well as remove the associated CSS files for admin_menu and a couple of other css files plus add in my own to style that stripped down page.

To do this I needed to use the new in D6 hook_theme_registry_alter function as well as an accompanying preprocess_page function.

Here's my code (wrapped in spots):

/**
* Implementation of hook_theme_registry_alter().
* Based on the jquery_update module.
*
* Make this page preprocess function runs *last*,
* so that a theme can't call drupal_get_js().
*/
function MYMODULE_theme_registry_alter(&$theme_registry) {
if (isset($theme_registry['page'])) {
// See if our preprocess function is loaded, if so remove it.
if ($key = array_search('MYMODULE_preprocess_page',
$theme_registry['page']['preprocess functions'])) {
unset($theme_registry['page']['preprocess functions'][$key]);
}
// Now add it on at the end of the array so that it runs last.
$theme_registry['page']['preprocess functions'][] = 'MYMODULE_preprocess_page';
}
}

/**
* Implementation of moduleName_preprocess_hook().
* Based on the jquery_update module functions. *
* Strips out JS and CSS for a path.
*/
function MYMODULE_preprocess_page(&$variables, $arg = 'my_page', $delta=0) {

// I needed a one hit wonder. Can be altered to use function arguments
// to increase it's flexibility.
if(arg($delta) == $arg) {
$scripts = drupal_add_js();
$css = drupal_add_css();
// Only do this for pages that have JavaScript on them.
if (!empty($variables['scripts'])) {
$path = drupal_get_path('module', 'admin_menu');
unset($scripts['module'][$path . '/admin_menu.js']);
$variables['scripts'] = drupal_get_js('header', $scripts);
}
// Similar process for CSS but there are 2 Css realted variables.
// $variables['css'] and $variables['styles'] are both used.
if (!empty($variables['css'])) {
$path = drupal_get_path('module', 'admin_menu');
unset($css['all']['module'][$path . '/admin_menu.css']);
unset($css['all']['module'][$path . '/admin_menu.color.css']);
$variables['styles'] = drupal_get_css($css);
}
}
}