AIR HTML with “_blank” Links
Tuesday 2 September 2008 @ 5:51 pm

I have played with the WebKit engine of AIR which is exposed to Flex with the HTML control.

You can set the content by specifying a http location or by setting the htmlText which should be HTML code as a String. Let’s play with the HTML so create a new Flex/AIR project in Flex Builder and use this code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var htmlCode:String = "<a href='http://adobe.com'>Adobe</a>";
		]]>
	</mx:Script>
 
	<mx:HTML htmlText="{htmlCode}" width="100%" height="100%" />
 
</mx:WindowedApplication>

If you test the application you see the link to Adobe and when you click it the Adobe site is shown. Now let’s change the htmlCode to:

private var htmlCode:String = "<a href='http://adobe.com' target='_blank'>Adobe</a>";

Everything looks the same when you test but when you click the link nothing happens but since target=”_blank” is set you would expect that the link opens in a new window. But AIR does not know where to open the link because the property navigateInSystemBrowser from the HTMLLoader class which is used by the HTML control is set to false.

If we now simply switch navigateInSystemBrowser to true the effect would be that all links open in the system browser but we (at least me) only want the target=”_blank” links to open in the system browser and a normal link (like implicit target=”_self”) would substitute the current site.

For that purpose we have to manipulate the DOM of the loaded HTML content so we can handle _blank links differently. This application then would look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="1000" height="600">
 
 
	<mx:Script>
		<![CDATA[
			import mx.logging.Log;
			import mx.logging.ILogger;
 
			private static const logger:ILogger = Log.getLogger("Main");
 
			[Bindable]
			private var htmlCode:String = "<a href='http://adobe.com' target='_blank'>Adobe (in new window)</a><br/><a href='http://adobe.com'>Adobe</a>";
 
			private function onComplete(e:Event):void
			{
				var document:Object = HTML(e.currentTarget).htmlLoader.window.document;
				var anchors:Object = document.getElementsByTagName("a");
 
				for(var i:Number=0; i < anchors.length; i++) {
					var a:Object = anchors[i];
 
					// Check if anchor has target and if it is _blank so it should be handled seperatly
					var targetAttr:Object = a.attributes.getNamedItem("target");
					if(targetAttr != null && targetAttr.nodeValue == "_blank")
					{
						var urlAttr:Object = a.attributes.getNamedItem("href");
						logger.debug("set link to " + urlAttr.nodeValue);
 
						a.onmouseup = function(o:Object):void{
							o.preventDefault();
							logger.info("handle link " + o.srcElement);
							navigateToURL(new URLRequest(o.srcElement), "_blank");
						};
					}
				}
			}
 
		]]>
	</mx:Script>
 
	<mx:TraceTarget fieldSeparator="->" includeCategory="true" />
 
	<mx:HTML htmlText="{htmlCode}" width="100%" height="100%" complete="onComplete(event)" />
 
</mx:WindowedApplication>

We have added a listener for the HTML complete event and then we get all anchors from the DOM to add own listeners when they are clicked. In this inline defined event handler we call navigateToUrl with target set to “_blank” which perfectly opens the URL in the system browser.

- Posted in AIR, ActionScript by Sönke  



One Response to 'AIR HTML with “_blank” Links'

  1. Sönke Rohde » AIR HTML with “_blank” Links Part II - Using HTMLHost - September 4th, 2008 at 11:37 am

    […] AIR HTML with “_blank” Links […]


Leave a Reply