4 Replies Latest reply on Jul 20, 2011 1:54 PM by Joe ... Ward

    Displaying HTMLloader into a div

    vmcg105

      I have the following code:

       

      $(document).ready(function() {
                  var page = new window.runtime.flash.net.URLRequest("http://www.example.com");
                  var html = new window.runtime.flash.html.HTMLLoader();
                  html.addEventListener(air.Event.LOCATION_CHANGE, changedLocation);
                  html.width = 600;
                  html.height = 400;
                  html.load(page);
      });

       

      As you can see when the page loads, it loads a domain into a HTMLLoader object.

       

      All I need to know is how to get this object to display on my page, for example inside a DIV (e.g <div id = "webpage"></div>)

        • 1. Re: Displaying HTMLloader into a div
          Peter Blazejewicz Level 4

          Hi,

           

          HTMLLoader is flash display object and cannot be attached to existing DOM: it is not HTMLElement type of object - its native to Flash/Air runtime not DOM/HTML:

          http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/html/HTMLLoader.html

          You would rather use iFrame:

          http://www.w3schools.com/html5/tag_iframe.asp

          or attach HTMLLoader to your hosting window (to Air runtime flash native display list)

           

          regards,

          Peter

          • 2. Re: Displaying HTMLloader into a div
            vmcg105 Level 1

            When I create the HTMLLoader object like this:

             

            html = window.runtime.flash.html.HTMLLoader.createRootWindow();

             

            instead of:

             

            html = new window.runtime.flash.html.HTMLLoader();

             

            It works excatly how I want it to, only that it is being displayed in a new window.

             

            Is there no way I can load the new page inside an area of the page, weather its inside a DIV or some sort of container. I don't want to use an iFrame has it dosent have the properties and methods that HTMLLoader can provide.

            • 3. Re: Displaying HTMLloader into a div
              Peter Blazejewicz Level 4

              Hi,

               

              below is how you could do that I believe, I'm not using HTML-only development but I think it will apply to your requirements nicely.

              I'm using such main window creation solution:

               

               

              <?xml version="1.0" encoding="utf-8"?>

              <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                                          xmlns:s="library://ns.adobe.com/flex/spark"

                                          creationComplete="creationCompleteHandler(event)"

                                          width="1024" height="764">

                   <fx:Script>

                        <![CDATA[

                             import mx.events.FlexEvent;

               

                             protected function creationCompleteHandler(event:FlexEvent):void

                             {

                                  nativeWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

                                  var htmlLoader:HTMLLoader = new HTMLLoader();

                                  htmlLoader.width = nativeWindow.width;

                                  htmlLoader.height = nativeWindow.height/2;

                                  htmlLoader.load(new URLRequest("app:/index.html"));

                                  nativeWindow.stage.addChild(htmlLoader);

                             }

                        ]]>

                   </fx:Script>

              </s:WindowedApplication>

               

               

              So "index.html" gets loaded with a code:

               

               

                   <head>

                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                        <title></title>

                        <script type="text/javascript" src="jquery-1.5.2.js"></script>

                        <script type="text/javascript">

                             $(document).ready(function()

                             {

                                  if(!window.runtime) return;

                                  var request = new window.runtime.flash.net.URLRequest("http://forums.adobe.com/message/3781041");

                                  var htmlLoader  = new window.runtime.flash.html.HTMLLoader();

                                  var newWidth = window.nativeWindow.width;

                                  var newHeight = window.nativeWindow.height/2;

                                  htmlLoader.y = newHeight;

                                  htmlLoader.height = newHeight;

                                  htmlLoader.width = newWidth;

                                  //

                                  htmlLoader.addEventListener(window.runtime.flash.events.Event.LOCATION_CHANGE, locationChangedHandler);

                                  htmlLoader.load(request);

                                  try

                                  {

                                       window.nativeWindow.stage.addChild(htmlLoader);

                                  } catch(error)

                                  {

                                       window.alert(error);

                                  }

                             });

                             // method to handle location changed

                             function locationChangedHandler(locationChangeEvent)

                             {

                                  ///

                             }

                        </script>

                   </head>

                   <body>

                   </body>

              </html>

               

               

               

              When application starts top HtmlLoader covers 50% of "native window" height. It computes width/height for new HTMLLoader instance (new browser window) by measuring native window dimensions. Then it uses native window "stage" display object to add new instance of HTMLLoader into Air runtime display list - and that's all. After they it will work as you expect (e.g. it catches and bubbles events to registered handlers, etc),

               

              hth,

              kind regards,

              Peter

              • 4. Re: Displaying HTMLloader into a div
                Joe ... Ward Level 4

                Note that you can do this without Flex, too. The general idea is to create a new NativeWindow object and then add two HTMLLoader objects to that window's stage.

                 

                For example, you could run the following script in your main window onload event to create a new window. Note that you would need to add event handlers to handle resizing the html loader objects when the window is resized, etc.

                 

                var options = new air.NativeWindowInitOptions(); 
                options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
                options.transparent = false; 
                var newWindow = new air.NativeWindow(options);
                newWindow.height = 800;
                newWindow.width = 600;

                //set the stage so display objects are added to the top-left and not scaled newWindow.stage.align = "TL"; newWindow.stage.scaleMode = "noScale";
                var upperHTML = new air.HTMLLoader( new air.HTMLHost() ); upperHTML.width = newWindow.width; upperHTML.height = newWindow.height/2; newWindow.stage.addChild( upperHTML ); //urlString is the URL of the HTML page to load lowerHTML.load( new URLRequest( "http:upperURL.com" ) );

                 

                var upperHTML = new air.HTMLLoader();
                lowerHTML.width = newWindow.width; 
                lowerHTML.height = newWindow.height/2;
                lowerHTML.y = newWindow.height/2;
                 
                newWindow.stage.addChild( lowerHTML ); 
                 
                //urlString is the URL of the HTML page to load 
                lowerHTML.load( new URLRequest( "http://lowerURL.com" ) );