Passing parameters to javascript via drupal_add_js

Nowadays most Web programs contain a significant Javascript (or JQuery) component but content management systems are still run in PHP, Java, python etc. In the case of the popular CMS Drupal, that language is PHP, and it would be rather nice if we had a reliable mechanism for passing arguments to a javascript file so that information would be available as parameters to customise its functionality. Unfortunately there is no such mechanism. Various hacks have been proposed and used within Drupal itself, so one can implant something like <script src="myscript.js?arg1=foo&arg2=bar"></script> and expect it to work, with the aid of a script that locates the script element, strips out the arguments and then passes them in javascript to a javascript function within myscript.js. Here's an example function that does it:

function getArgs( scrName ) { var scripts = jQuery("script"); var params = new Object (); scripts.each( function(i) { var src = jQuery(this).attr("src"); if ( src != undefined && src.indexOf(scrName) != -1 ) { var qStr = src.replace(/^[^\?]+\??/,''); if ( qStr ) { var pairs = qStr.split(/[;&]/); for ( var i = 0; i < pairs.length; i++ ) { var keyVal = pairs[i].split('='); if ( ! keyVal || keyVal.length != 2 ) continue; var key = unescape( keyVal[0] ); var val = unescape( keyVal[1] ); val = val.replace(/\+/g, ' '); params[key] = val; } } return params; } }); return params; } /* main entry point - gets executed when the page is loaded */ jQuery(function(){ // DOM Ready - do your stuff var params = getArgs('tabs'); var tabs = new myobject(params['target'],params['docid']); });

Using drupal_add_js

Another technique is to install a javascript file before the page is fully loaded so it will get executed when loading is complete. For this purpose the function drupal_add_js comes into play. It has to be called within a hook_init or hook_preprocess_page function. But since parameters to javascript files are not really allowed, this function escapes any content like '&', '=' or '?' into %26, %3D, %3F, so turning a request for a javascript file into something that is simply not there.

A workaround I used successfully is to precede the call to drupal_add_js('myscript.js','file') with another call to drupal_add_js(...,'inline');. In this way I managed to store the parameters in browser local storage and retrieve them similarly. e.g. for the inline call I used: drupal_add_js("localStorage.setItem('module_params', 'docid=english/harpur/h080&target=tabs-content')",'inline'); And to retrieve these values a function similar to the one above works just fine:

/** * This reads the "arguments" to the javascript file */ function getArgs() { var params = new Object (); var module_params = localStorage.getItem('module_params'); if ( module_params != undefined && module_params.length>0 ) { var parts = module_params.split("&"); for ( var i=0;i<parts.length;i++ ) { var halves = parts[i].split("="); if ( halves.length==2 ) params[halves[0]] = halves[1]; } } return params; } /* main entry point - gets executed when the page is loaded */ jQuery(function(){ // DOM Ready - do your stuff var params = getArgs(); var tabs = new myobject(params['target'],params['docid']); });