Using GreyBox in your HTML Applications: The Unobtrusive JavaScript Solution | 2 | WebReference

Using GreyBox in your HTML Applications: The Unobtrusive JavaScript Solution | 2


Using GreyBox in your HTML Applications: The Unobtrusive JavaScript Solution [con't]

The addHTACompatibleGreyboxScript() function uses the String.replace() function to add the "application: yes" attribute to the GreyBox <IFRAME> element. The String.match() function is applied first to make sure that the search string does not occur more than once in the script. Assuming that it doesn't, the text is replaced and the new script is appended to the document:

The importScript() function uses AJAX to load the gb_scripts.js file. Many people don't know that AJAX can be used without a web server, in the same way that a browser can. It just uses the file (file:///sDrives[|sFile]) protocol instead of http. Notice that I did not use the AJS library to create the XmlHttpRequest object. AJAX capabilities are not included in the AJS script because GreyBox uses a subset of the full AJS scripts.

If you recall from the On-Demand JavaScript Explained article, the document.write() function "must be called during the loading of the page; otherwise, it will clobber the existing document!". The new line (\n) characters make the document source code easier to read:

While nothing can beat the document.write() function for simplicity or brevity, there are other ways to append a script to the document. One is using DOM methods. Although more work, changes can be made at a more granular level, thus providing more control over each step:

The above code obtains a reference to the currently executing script using the document.getElementsByTagName() function. It is the last script in the returned array. One wrinkle to be aware of using this method is that calling the Element.appendChild() function is not supported in every version of Internet Explorer. Therefore, we must test the Element.canHaveChildren property first. In those cases where the appendChild() function is not recognized, the script element's text property can be set directly.

As more and more JavaScript frameworks find their way into web pages, the model presented here might just be the ticket for customizing behavior on a site-wide or even a page-by-page basis without changing code in the third-party components. Maybe someone will eventually come out with a "JS Library Integration Framework"...

Rob Gravelle combined his love of programming and music to become a software guru and accomplished guitar player. He created systems that are used by Canada Border Services, CSIS and other Intelligence-related organizations. As a software consultant, Rob has developed Web applications for many businesses and recently created a MooTools version of PHPFreechat for ViziMetrics. Musically, Rob recently embarked on a solo music career, after playing with Ivory Knight since 2000. That band was rated as one Canada's top bands by Brave Words magazine (issue #92) and released two CDs. In 2007, Rob recorded the KNIGHTFALL CD in collaboration with the former Ivory Knight vocalist and legendary guitarist/producer, Jeff Waters of Annihilator fame. A completely FREE high quality MP3 download of his "Ultraviolence" intrumental, is availalable from his website, Rob is available for short-term software projects and recording session work. to inquire, but note that, due to the volume of emails received, he cannot respond to every email. Potential jobs and praise receive highest priority!

Original: October 16, 2009