Launching new browser windows from Flex

by Peter deHaan on August 29, 2007

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 as: navigateToURL

{ 30 comments… read them below or add one }

1 Xavi 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.

2 peterd 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

3 fufach 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

4 Jana 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

5 peterd 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

6 Devon 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

7 Ryan 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

8 Teresa September 25, 2008 at 9:32 pm

Hi,

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

Thanks

9 peterd 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

10 Romain 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?

11 Sandeep Arneja January 5, 2009 at 1:37 pm

Works for me. Thanks,

12 Anenth April 3, 2009 at 4:44 am

Thanks Very Much !!!!!!!!

13 Prasanna 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,

14 Peter deHaan 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

15 PeterH 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,

16 Peter deHaan 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&amp;MapY=290745.329413398')" />
 
</mx:Application>

Peter

17 vered 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.

18 Tim Wilson 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?

19 Tim Wilson 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");
           }
     }
}

20 Peter deHaan 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

21 Tim Wilson 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.

22 Ankur 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

23 Peter deHaan 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

24 Tahir Alvi November 17, 2009 at 11:33 pm

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

Thanks

25 Ronnie 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 :)

26 Ronnie 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?

27 Ronnie 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.

28 Ronnie 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…..

29 Jesse 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’

30 Tahir Alvi January 23, 2010 at 4:45 am

Hi,

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

Thanks

Launching new browser windows from Flex

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Launching new browser windows from Flex

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising