8 Replies Latest reply on Mar 20, 2007 5:54 AM by netsql4

    Embedded Web Page?

    darkfrog26
      Is it possible to embed a web page (like an iframe in HTML) as a Flex/Flash component inline?

      Though I believe it's possible to accomplish this with Text.htmlText I can just reference a URL and have it load, I would have to parse the content and set it in. Further, it wouldn't allow inline navigation which is preferrable.
        • 1. Re: Embedded Web Page?
          phi2265 Level 1
          TextAreas support some HTML. You could try that. I can't remember the exact format it has to be in. But you should be able to find it in the help docs. Not everything is supported, the docs say the <img tag isn't fully supported and that in some cases it might not work.


          • 2. Re: Embedded Web Page?
            darkfrog26 Level 1
            So that is to say there's no Flex or Flash object type to embed a full web page (from URL) into Flash?
            • 3. Re: Embedded Web Page?
              phi2265 Level 1
              Correct.


              • 4. Re: Embedded Web Page?
                netsql4
                Sure, take a look at pointcast.com.
                • 5. Re: Embedded Web Page?
                  darkfrog26 Level 1
                  I'm assuming web pages are displayed in there? I'm getting no data to display. Do you know how they do it?
                  • 6. Re: Embedded Web Page?
                    darkfrog26 Level 1
                    I figured out how they do it on pointcast.com, they create an IFrame in the browser that overlays on top of Flex. I'm going to write a custom Flex component to do better support for this....if anyone is interested I can post the result.
                    • 7. Re: Embedded Web Page?
                      darkfrog26 Level 1
                      Here's my first iteration of the WebBrowser Flex component. I'm going to add more features to properly support scrolling, events, etc. but this will do for what I'm working on right now:

                      package jsl {
                      import flash.external.ExternalInterface;
                      import flash.geom.Point;

                      import mx.containers.Canvas;

                      import mx.events.FlexEvent;
                      import mx.events.MoveEvent;
                      import mx.events.ResizeEvent;

                      public class WebBrowser extends Canvas {
                      [Inspectable(defaultValue=null)]
                      private var pageUrl:String = null;
                      private var initted:Boolean = false;

                      public function WebBrowser() {
                      super();
                      this.addEventListener(FlexEvent.CREATION_COMPLETE, onFlex);
                      this.addEventListener(MoveEvent.MOVE, onMove);
                      this.addEventListener(ResizeEvent.RESIZE, onResize);
                      }

                      private function onMove(event:MoveEvent):void {
                      validateWindow();
                      }

                      private function onResize(event:ResizeEvent):void {
                      validateWindow();
                      }

                      private function onFlex(event:FlexEvent):void {
                      validateWindow();
                      if (pageUrl != null) ExternalInterface.call('loadURL', id, pageUrl);
                      initted = true;
                      }

                      private function validateWindow():void {
                      var p:Point = new Point(x, y);
                      p = localToGlobal(p);
                      ExternalInterface.call('updateBrowser', id, p.x + 2, p.y + 2, width - 4, height - 4);
                      }

                      public function set url(_pageUrl:String):void {
                      pageUrl = _pageUrl;
                      if (initted) {
                      ExternalInterface.call('loadURL', id, pageUrl);
                      }
                      }

                      [Bindable(event="changeUrl")]
                      public function get url():String {
                      return pageUrl;
                      }
                      }
                      }

                      The only JavaScript necessary is as follows:

                      function updateBrowser(id, x, y, width, height) {
                      var iframe = document.getElementById('iframe' + id);
                      if (iframe == null) {
                      iframe = document.createElement('iframe');
                      iframe.setAttribute('id', 'iframe' + id)
                      iframe.setAttribute('style', 'position: absolute; background-color: white; border: 0px;');
                      iframe.setAttribute('frameborder', '0');
                      var body = document.getElementsByTagName("body")[0];
                      body.appendChild(iframe);
                      }
                      iframe.style.left = x;
                      iframe.style.top = y;
                      iframe.width = width;
                      iframe.height = height;
                      }

                      function loadURL(id, url) {
                      var iframe = document.getElementById('iframe' + id);
                      iframe.src = url;
                      }

                      The way that pointcast.com does it limits you to a single browser in your Flex page. This way you can have as many as you like and they are based off an 'id' passed to it.

                      Hope someone else finds this useful.
                      • 8. Re: Embedded Web Page?
                        netsql4 Level 1
                        I'd like to update it to use your example. Not clear what all needs to happen, do you have a hello world I can look at or what all needs to happen.