3 Replies Latest reply on Jan 15, 2010 12:50 AM by RK...

    ExternalInterface call within Javascript popup

    joeroth2010

      I am embedding a swf in a popup window using javascript's window.open function. I am currently passing in static values for the popup's height and width corresponding to the height and width of the embedded swf.  A user can click on a button in the swf, and it changes the size of the swf from 400x300, to 800x600.  Within flex, I use ExternalInterface.call("resize"); but nothing happens.  I am a complete noob with javascript, is this not the way to use the ExternalInterface API?  Any ideas why it isn't working?  Is there an easier way to get the same functionality to work using something else?  Javascript code is below, tons of thanks in advance for helping me out.

       

      <SCRIPT TYPE="text/javascript">

      <!--

       

      function popup(mylink, windowname)

      {

           if (! window.focus)return true;

                var href;

           if (typeof(mylink) == 'string')

                href=mylink;

           else

                href=mylink.href;

       

           popup = window.open(href, windowname, 'width=400,height=300,scrollbars=no,resizable=1');

       

           return false;

      }

       

      function resize()
      {
          popup.resizeTo(800, 600);
      }


      //-->

      </SCRIPT>

       

       

       

        <body>

          <A HREF="http://localhost/Main.swf" onClick="return popup(this, 'notes')">

             App

          </A>

        • 1. Re: ExternalInterface call within Javascript popup
          RK...

          You can wrap the swf file in some html and add the javascript code to resize the popup.
          Let me know if you need an example

          • 2. Re: ExternalInterface call within Javascript popup
            joeroth2010 Level 1

            An example would be great!  If you don't mind....

             

            Right now, I can't make any type of communication between flex and the javascript pop-up.  I know that by using the ExternalInterface.call method, the swf sends function calls to its container.  Is this container the actual pop-up? or the index.html page that houses all the javascript code?  I'm starting to think its the actual pop-up, but can't see how embedding the swf in html solves the problem....

             

            Thanks for you help thus far.

            • 3. Re: ExternalInterface call within Javascript popup
              RK... Level 3

              Here is the sample,

               

              Sample.mxml

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application 
                   xmlns:mx="http://www.adobe.com/2006/mxml" 
                   layout="absolute"
                   width="100%" height="100%">
                   <mx:Script>
                        <![CDATA[
                             private function resize(event: MouseEvent): void {
                                  ExternalInterface.call("resize");
                             }
                        ]]>
                   </mx:Script>
                   <mx:Button id="btn" label="Resize" click="resize(event)" />
              </mx:Application>
              

               

              Parent html

              <html>
                   <head>
                        <title>Resize Demo</title>
                        <script language="javascript">
                             function showPopup() {
                                  window.open("Popup.html", "Popup", "width=300, height=300,resizable=1");
                             }
                        </script>
                   </head>
                   <body>
                        <input type="button" value="Popup" onClick="showPopup()" />
                   </body>
              </html>
              

               

              Child html (Popup.html)

              <html>
                   <head>
                        <title>Resize - Popup</title>
                        <script language="javascript">
                             function resize() {
                                  window.resizeTo(800, 600);
                             }
                        </script>
                   </head>
                   <body scroll="no" leftmargin="0" topmargin="0" marginheight="0">
                        <object width="100%" height="100%">
                             <param name="movie" value="Sample.swf" />
                             <embed src="Sample.swf" width="100%" height="100%"></embed>
                        </object>
                   </body>
              </html>