air: injecting jQuery

After you load a web page into an HTML component you may want to select, modify, add and remove DOM elements in reponse to events within the AIR application and/or gather data from the web page for use in the AIR app. jQuery ( http://jquery.com/ ) is a robust and feature filled JavaScript library which provides methods which can make it much easier to select and modify DOM elements, however not every web page includes this library and you may not have the option to modify the web page manually to add the jQuery library before loading it into your AIR application.

To work around this you can inject the library after the page has loaded, and then make calls to it's methods from within the AIR application. First you need to load the jQuery libary as a String. You can do this either from an online resource or from a copy of the JavaScript file on the hard drive, for example if you have included it as an asset within the application directory of the AIR app.

Here's an example of loading jQuery from a remote source:

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationCompleteHandler(event)"> <fx:Declarations> </fx:Declarations> <fx:Script> <![CDATA[ import mx.events.FlexEvent; /* PROPERTIES */ protected var loader:URLLoader; protected var jquery_string:String; /* INITIALIZATION */ protected function creationCompleteHandler(event:FlexEvent):void { // load jQuery from Google loader = new URLLoader(new URLRequest("https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js")); loader.addEventListener(Event.COMPLETE, jqueryLoadComplete); } protected function jqueryLoadComplete(event:Event):void { loader.removeEventListener(Event.COMPLETE, jqueryLoadComplete); // save jQuery to a String for re-use jquery_string = loader.data; // load the web page html.location = "http://www.somewebsite.com/pagetoload.html"; } /* METHODS */ protected function html_completeHandler(event:Event):void { // inject jQuery into the web page var jquery_script:Object = html.htmlLoader.window.document.createElement("script"); jquery_script.type = "text/javascript"; jquery_script.innerText = jquery_string; html.htmlLoader.window.document.getElementsByTagName("head")[0].appendChild(jquery_script); // test it by calling a jQuery method, for example finding all of the image files that are // inside of elements with a specific class var images:Object = html.domWindow.$(".someclass").find("img"); // trace out the URLs for the images for(var i:int = 0; i < images.length; ++i) { trace(html.domWindow.$(images[i]).attr("src")); } } ]]> </fx:Script> <mx:HTML id="html" width="100%" height="100%" complete="html_completeHandler(event)" /> </s:WindowedApplication>

And here's an example which loads jQuery from a JavaScript file saved as an asset in the application directory:

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationCompleteHandler(event)"> <fx:Declarations> </fx:Declarations> <fx:Script> <![CDATA[ import mx.events.FlexEvent; /* PROPERTIES */ protected var jquery_string:String; /* INITIALIZATION */ protected function creationCompleteHandler(event:FlexEvent):void { // load jQuery as a String from a file in the app folder var jquery_file:File = File.applicationDirectory.resolvePath("assets/jquery-1.6.2.min.js"); if(jquery_file.exists) { var file_stream:FileStream = new FileStream(); file_stream.open(jquery_file, FileMode.READ); jquery_string = file_stream.readUTFBytes(file_stream.bytesAvailable); // load the web page html.location = "http://www.somewebsite.com/pagetoload.html"; } } /* METHODS */ protected function html_completeHandler(event:Event):void { // inject jQuery into the web page var jquery_script:Object = html.htmlLoader.window.document.createElement("script"); jquery_script.type = "text/javascript"; jquery_script.innerText = jquery_string; html.htmlLoader.window.document.getElementsByTagName("head")[0].appendChild(jquery_script); // test it by calling a jQuery method, for example finding all of the image files that are // inside of elements with a specific class var images:Object = html.domWindow.$(".someclass").find("img"); // trace out the URLs for the images for(var i:int = 0; i < images.length; ++i) { trace(html.domWindow.$(images[i]).attr("src")); } } ]]> </fx:Script> <mx:HTML id="html" width="100%" height="100%" complete="html_completeHandler(event)" /> </s:WindowedApplication>

NOTE : To use these examples you will need to replace the dummy website URL and dummy class with real ones. They were developed in Flash Builder 4.5 but should be adaptable to Flex 3. This solution was inspired by an article by Brandon Martinez: http://www.brandonmartinez.com/2011/04/23/inject-jquery-onto-any-site/.