Launching new browser windows from Flex

By Peter deHaan On August 29, 2007 · 39 Comments

The following example shows how you can use the navigateToURL() method in the flash.utils package to open new browser windows, or replace the content in the current window.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/29/launching-new-browser-windows-from-flex/ -->
<mx:Application name="navigateToURL_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import flash.net.navigateToURL;
 
            private function newWin(url:String):void {
                var urlRequest:URLRequest = new URLRequest(url);
                navigateToURL(urlRequest, String(comboBox.selectedItem));
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label text="window:" />
        <mx:ComboBox id="comboBox">
            <mx:dataProvider>
                <mx:String>_blank</mx:String>
                <mx:String>_top</mx:String>
                <mx:String>CustomName</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>
 
    <mx:LinkButton label="Go to adobe.com"
            click="newWin('http://www.adobe.com/')" />
 
</mx:Application>

View source is enabled in the following example.

In the previous example you can specify the target window by using the ComboBox control in the docked ApplicationControlBar container at the top. If you specify “_blank”, new windows will be created. If you specify “_top”, the current window will be replaced with the specified URL. If you specify the third option, “CustomName“, a new named window will be created. So clicking the LinkButton control 5 times loads the content into the same window. And of course the CustomName could be anything you wanted. Basically consider this the “target” attribute of an HTML <a> tag (as in <a href="http://www.adobe.com/" target="_blank">Go to adobe.com</a>).

When using the navigateToURL() method, it is important to remember that the method takes a URLRequest object, and not a String object.

Tagged with: navigateToURL

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

39 Responses to Launching new browser windows from Flex

Xavi says:

November 4, 2007 at 10:14 pm

Hello!

I need some help because I’m trying to run the example but seems is not working

_top is not working, only _blank it is

I don’t know way

Maybe is a bug ie7.

Reply
peterd says:

November 4, 2007 at 10:40 pm

Xavi,

What happens when you specify “_top” versus “_blank”? In the above example, specifying “_top” replaces the current page with the new URL, wheras pecifying “_blank” opens a new browser window in my IE7/WIN 9,0,60,235 (debug).

Peter

Reply
fufach says:

January 17, 2008 at 2:41 pm

Hi,

In my Flex 3.3 _blank target is not working. I cannot open this ^ example with ‘blank’ as well. Is this a bug or there is a different way to open site in separate tab/window…?

Fufach

Reply
Jana says:

February 20, 2008 at 8:06 am

Hi,

I’m interested in taking an xml:XML object in flex and launching a new browser window to display it. I wasn’t planning on saving it to a file but rather have created it dynamically in memory but want the browser to decide what XML viewer to invoke. Is there a way to do this without saving the file to disk or uploading it first to the server?

Also…this web site (blog.flexexamples.com) is very hard to read in IE 7.0. The black color hides what I type in in the search input box. Anyway the designer could modify the colors of this website to be a little more user friendly? In particular I see light grey text in the black search text box. Very hard to see what I typed in.. Why black anyway? pretty hard on the eyes but then again I know that is very subjective…

Jana

Reply
peterd says:

February 20, 2008 at 12:12 pm

Jana,

I think you would need to save the XML to the disk/server first.

As for the blog design, yeah, this is just a default WordPress template. I’ve been thinking of finding a new theme as it seems there are lots of weird issues, like people not being able to post code in the comments without the blog somehow eating them.

Peter

Reply
Devon says:

March 7, 2008 at 2:03 am

Hey, when I try to open a window in _top or _self I get a security error:
“SecurityError: Error #2137: Security sandbox violation”

Any idea what could be the cause of this?
Thanks

Reply
Ryan says:

August 14, 2008 at 11:27 am

_top is the only part of this example that works for me. I’m using Firefox 3.0. I tested it in IE and it seems to work fine. Anyone for a way to do this for all browsers????

Thanks

Reply
Teresa says:

September 25, 2008 at 9:32 pm

Hi,

How to hide the location bar and scroll bar in the new window?

Thanks

Reply
peterd says:

September 26, 2008 at 12:22 am

Teresa,

I believe in order to hide location bars and scroll bars in a new HTML window, you need to use the ExternalInterface API and call a JavaScript function in your HTML container.

Peter

Reply
Romain says:

December 10, 2008 at 8:47 am

What about opening file and folder located on a local network?

This seems to require to use the ExternalInterface class, like :

ExternalInterface.call(WINDOW_OPEN_FUNCTION, url, window, features);

Where WINDOW_OPEN_FUNCTION is the javascript code to launch the function : window.open

But there are some security warning in Flex when trying to open these files and folder, Mac/Linux/Windows have the same.

Any idea on how to easily, cross-plateform, open a folder on the network?

Reply
- Karthik says:
  
  July 6, 2011 at 10:11 pm
  
  Did you find any solution Romain, I had the same problem. Please help me.
  
  Reply
Sandeep Arneja says:

January 5, 2009 at 1:37 pm

Works for me. Thanks,

Reply
Anenth says:

April 3, 2009 at 4:44 am

Thanks Very Much !!!!!!!!

Reply
Prasanna says:

July 27, 2009 at 4:16 am

Hello,

navigatoToURL is not at all working in the IE7 at all. No new window is opening at all with any parameter – _blank or _self etc. Could you please help me to resolve that?

Thanks in advance,
Prasanna,

Reply
- Peter deHaan says:
  
  July 27, 2009 at 7:09 am
  
  Prasanna,
  
  Do you have any popup blockers which could be preventing the window from appearing?
  I just quickly verified that the above example was working in IE8 and Google Chrome on Vista-64.
  
  Peter
  
  Reply
PeterH says:

September 30, 2009 at 7:31 am

I tried your code and it worked fine. I have a pictometry application that requires a “&” in the url. Flex does not like that, I have tried &amp without success.
Here is the flex buld error:
Severity and Description Path Resource Location Creation Time Id
The reference to entity “MapY” must end with the ‘;’ delimiter. FlexViewer/src newbrowsertest1.mxml line 33 1254320435310 236

My code:
click=”newWin(‘http://gas.county.suf/realpict/pictimages.htm?MapX=1259411.63477388&MapY=290745.329413398‘)” />

If I take out the “&” it builds without errors and display a new window. However because of the missing & the web app does not find the y value.
Is there another way to opena url in flex ???
Thanks,

Reply
- Peter deHaan says:
  
  September 30, 2009 at 7:56 am
  
  @PeterH,
  
  This works for me in Flex 3.4:
  <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import flash.net.navigateToURL; private function newWin(url:String):void { navigateToURL(new URLRequest(url)); } ]]> </mx:Script> <mx:Button id="btn" click="newWin('http://gas.county.suf/realpict/pictimages.htm?MapX=1259411.63477388&MapY=290745.329413398')" /> </mx:Application>
  Peter
  
  Reply
vered says:

October 15, 2009 at 3:02 am

I am using the CustomName option. When I click the LinkButton control, it opens new window if it does not exist. If exists, it does not open a new window as expected, but it does not bring to focus the existing window.
Please advice.

Reply

Tim Wilson says:

November 2, 2009 at 4:09 pm

Pete, I need your help please – I have an mx:HTML component in an AIR project thats working fine, except I would like for the links that appear in the loaded HTML document to open in a new window instead of the mx:HTML component. any suggestions?

Tim Wilson says:

November 2, 2009 at 4:36 pm

Found this code online but I keep getting this error – Type was not found or was not a compile-time constant:JavaScriptObject

what am I doing wrong??

private function htmlComplete(evt:Event):void {
          var anchors:JavaScriptObject = displayHtml.htmlControl.window.document.getElementsByTagName("a");
             if(anchors != null)
            for(var i:Number=0; i < anchors.length; i++) {
                anchors[i].onmouseup = function():void {
                var request:URLRequest = new URLRequest(arguments[0].srcElement); 
                navigateToURL(request, "_blank");
           }
     }
}

Peter deHaan says:

November 2, 2009 at 5:35 pm

@Tim Wilson,

I don’t know what a “JavaScriptObject” object is. Not sure if that is an AIR thing or a 3rd party thing. You’d have to try Googling, or consult the site where you found the code online.

I found the following tip on the Adobe Forums which seemed to work in my simple test:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </mx:ApplicationControlBar>
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                myHTMLComp.htmlLoader.navigateInSystemBrowser = true;
            }
        ]]>
    </mx:Script>
 
    <mx:HTML id="myHTMLComp" width="400" height="300" initialize="init();">
        <mx:htmlText>
            <![CDATA[
                <li><a href="http://adobe.com/" rel="nofollow">adobe.com</a></li>
                <li><a href="http://flex.org/" rel="nofollow">flex.org</a></li>
                <li><a href="http://blog.flexexamples.com/" rel="nofollow">flexexamples.com</a></li>
                <li><a href="http://airexamples.com/" rel="nofollow">airexamples.com</a></li>
            ]]>
        </mx:htmlText>
    </mx:HTML>
 
</mx:WindowedApplication>

[via Adobe Forums: "HTML control doesn't allow browser pop-ups from within page"]

Peter

Tim Wilson says:

November 2, 2009 at 8:52 pm

Thank you, Pete… I’ll check into that. You might be right about it being a third party thing… What have provided me seems like exactly what I was looking for anyways…. p.s.. really appreciate your help. I’m not a professional designer or anything like that.. I just find computer programming to be a very big hobby of mine.

Reply
Ankur says:

November 11, 2009 at 1:20 am

Hey ,

navigateToUrl does not allow more than 1500/2000 characters.

How can we append more characters in it.
please reply its yrgent.

Thanks in advance.

Ankur

Reply
- Peter deHaan says:
  
  November 11, 2009 at 7:21 am
  
  @Ankur,
  
  File a bug at http://bugs.adobe.com/flashplayer/. My guess is that it may be a browser limitation as I’m fairly certain that browsers restrict how much data you can pass in a query string.
  
  Peter
  
  Reply
Tahir Alvi says:

November 17, 2009 at 11:33 pm

If i want to navigate from air, are its works fine?

Thanks

Reply
Ronnie says:

November 25, 2009 at 7:25 am

Hi peter,
I want to dynamically add parameters to the url based on the items selected from a group of combo boxes.
Like say, in the comment previously quoted;
click=”newWin(’http://gas.county.suf/realpict/pictimages.htm?MapX=1259411.63477388&MapY=290745.329413398′)” />
i want to add these parameters(MapX and MapY) dynamically based on the Combo Box elements….
How do i do it??? Awaiting your response :)

Reply
Ronnie says:

November 25, 2009 at 7:27 am

And i wanna be able to use the ‘&’ token in the url as well as i would be needing to send four values to the URL.
Im using Flex 2. Is it possible?

Reply
Ronnie says:

November 25, 2009 at 7:37 am

When i try to give the url four different parameters( for eg: abc, def, ghi, jkl ) each seperated by ‘&’ token, the Flex builder 2 gives a error:
The reference to entity “def” must end with the ‘;’ delimiter.

Reply
Ronnie says:

November 26, 2009 at 1:18 am

Hi Peter,
Thx a lot for this post…
Its helped me a lot and i ve fixed the issues previolusly quoted in the comments…..

Reply
- vijay Kumar says:
  
  September 29, 2010 at 10:17 pm
  
  HI
  i am also facilng the same problem can you tell me what is the solution for it.what you done to allow & to be in URl.thank you in advance.
  
  Reply
Jesse says:

December 15, 2009 at 5:13 pm

I had to make sure I included ‘http://’ at the beginning of the url string, otherwise it would open within the context of my application. So use ‘http://www.google.com‘ and not just ‘www.google.com’

Reply
Tahir Alvi says:

January 23, 2010 at 4:45 am

Hi,

want to open a new air window from nativeApplication.
How i do that??

Thanks

Reply
venkat says:

February 15, 2010 at 5:29 am

I want to open a browser in any container like hbox, vbox so on. Is it possible to open a browser in the swf file container.

Reply
venkat says:

February 15, 2010 at 5:30 am

Is it possible to call external application from swf file and show that in any container with in the swf file?

Reply
gokul says:

April 29, 2010 at 2:06 am

hey its really helpful thanks!!!!!!!!

Reply
Theo says:

May 12, 2010 at 7:54 am

http://livedocs.adobe.com/flex/3/langref/mx/controls/Label.html#event:link

This described how to use it within a Label. Please note the ‘event:’ before the actual URL. It worked for me.

Reply
Wow says:

July 23, 2010 at 7:56 pm

it works, thanks very much~~navigateToURL() is useful!

Reply
Chetan says:

May 2, 2011 at 12:08 am

I want to hide the address bar, links and standard buttons etc in the new window which i open using _blank. Can anyone tell me exactly how to do this ? Please reply asap.

Reply
matriX says:

January 6, 2012 at 12:39 am

Hi Peter,

Please tell me how to solve this problem. I used navigateToURL with CustomName option to open/replace contents in a new window. But when the new window is minimized, while triggering navigateTourl call, it is not being maximized.

Reply