Change Browser Title in FLEX using Javascript
March 27th, 2009
If you only need to statically set the Browser Title in FLEX, then just set the pageTitle property of your <mx:Application>
<mx:Application backgroundColor="#ffffff" pageTitle="My Application: By Greg Jessup"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()"
width="100%"
height="100%"
>
Howerver, sometimes you want to do it dynamically. The only way to do this is by making a call from Flex to the HTML template and invoking a JavaScript function.
We use the flash.external.ExternalInterface to accomplish this task.
Here is how its done…..
FLEX CODE
import flash.external.ExternalInterface;
private function SetBrowserTitle(newTitle:String) : void {
if ( ExternalInterface.available ) {
ExternalInterface.call("changeTitle",newTitle);
}
}
Javascript
Simply edit the html-template/index.template.html in you project. Your header will look something like this. The main thing you are concerned with here is adding the changeTitle function….see below
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
function changeTitle(newTitle) {
document.title=newTitle; // this works with IE only
}
</script>
<style>
body { margin: 0px; overflow:hidden }
</style>
</head>
