How often have you been writing a Javascript front-end to a web application and thought "If only I knew how the CMS I'm using on the server is configured?" or "What page does my CMS think I'm on?" or "Does the CMS know I'm logged in?  Should I create and show some Admin controls?"

There may be debug options, current page name, hints about what the user has done recently, any number of things which it would be useful for your Javascript app to know.

You don't want to change code in production; that must always be a snapshot of the current tested system.  You also don't want to have PHP adjust the Javascript as it is served as this becomes tricky, unreadable and, above all else, slow.

So how do we do this?  Well, this is one way.

You can store up to 65Kb of data in an HTML attribute.  You can put more anything you like in there.  So what we're going to do is BASE64 encode a JSON encoded associative array and hide it as an attribute in a hidden "bold" tag just before the closing "body" tag, something like this:

$jsOptions = array("BASEURL"=>BASEURL,

                                  "DEBUGJS"=>DEBUGJS,

                                  "Page.Name"=>$env->page->Name

                                  "IsLoggedIn=>$auth->isLoggedIn());

$jc = json_encode($this->jsOptions);

$jc = base64_encode($jc);

$before = "<b id='WIT_JSBOOT' style='display:none'" .

                  " conf='{$jc}'></b>";

$html = str_ireplace("</body>", $before . "\n</body>\n", $html);

By JSON encoding it, we can so very easily extract it the other end.  Base64 encoding guarantees no problems with odd chars or charsets.

So now you have some HTML that may look a little like this:

...

<b id='WIT_JSBOOT' style='display:none' conf='eyJCQVNFVVJMIjoiaHR0cHM6XC9cL2Rldi5vbGljb21iZXIuY28udWtcL29saWNvbWJlci5jby51a1wvd2ViXC8iLCJERUJVR0pTIjp0cnVlLCJQYWdlLk5hbWUiOiJob21lIiwiaXNMb2dnZWRJbiI6IiJ9'></b>

</body>

So how do we access this from Javascript?  We just need to get hold of the "conf" attribute from this node and decode it:

$(document).ready(function()

{

   // Naturally, we wait till the DOM is ready so we can get at our config.

   // Things that need to know about config need to check it exists and try again later.  Or catch the

   // "Config.Loaded" event

    var conf = document.getElementById("WIT_JSBOOT")
                      .attributes
                      .getNamedItem("conf")
                      .value;
   conf = atob(conf);
   window.config = jQuery.parseJSON(conf);

   // Fire off a custom jquery event to anything that might be interested in this being ready

   $(document).trigger("Config.loaded");

});

(You'll want to search the 'net for "atob" and "btoa" - at the time of writing, these only work in Firefox, Chrome, Opera - but there are many implementations available to use in Internet Explorer)

And hey presto, any of your Javascript can now access a global object on the Window called "config", which in this case looks a little like this:

conf :=  {BASEURL: http://olicomber.co.uk/, DEBUGJS: true, 'Page.Name': 'home', isLoggedIn: true};

From here, you can now easily create page or webservice URLs pointing back to the proper place, or show controls which should only be seen if the user is logged in.  You could even publish the "User Type" and other info here and make the interface completely personalised.  (Though obviously these are "hints" and not "security" - any calls to the server should be validated and authenticated there)

Enjoy.

...Click for More
Article
configuration
javascript
json
php
Programming