Launching new browser windows from Flex

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.

39 thoughts on “Launching new browser windows from Flex

  1. 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. 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. 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. 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. 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. 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. _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,

    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

  9. 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?

  10. 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,

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

  11. 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,

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

  12. 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.

  13. 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?

    1. 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");
                 }
           }
      }
      1. @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

  14. 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.

  15. 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

  16. 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 :)

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

  18. 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.

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

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

  20. 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’

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

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

  23. 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.

  24. 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.

Comments are closed.