5 Replies Latest reply on Jun 14, 2011 5:51 AM by blazejewicz

    Webkit Page Zooming or Scaling in HTML Control

    Tim John Level 1

      Hi all,

       

      I read somewhere that the built in Webkit browser used by the HTML component is capable of zooming (scaling up) a web page, much like it can do in its desktop implementations (Safari etc.)

       

      Does anybody know if this is true and if so, how to do it?

       

      Much appreciated,

       

      Tim

        • 1. Re: Webkit Page Zooming or Scaling in HTML Control
          blazejewicz Level 4

          Hi Tim,

           

          There could be various implementation for that but what about using "zoom" CSS property? Below one is working fine in Flash Builder 4.5 Air:

           

          see gist snippet as below code is modified on forum:

          https://gist.github.com/974631

           

          <?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"

                                      xmlns:mx="library://ns.adobe.com/flex/mx">

              

               <fx:Script>

                    <![CDATA[

                         protected function zoomInHandler(event:MouseEvent):void

                         {

                              html.htmlLoader.window.document.body.style.zoom = 1.5;

                         }

                        

                         protected function resetZoomHandler(event:MouseEvent):void

                         {

                              html.htmlLoader.window.document.body.style.zoom = 1.0;

                         }

                        

                         protected function zoomOutHandler(event:MouseEvent):void

                         {

                              html.htmlLoader.window.document.body.style.zoom = 0.5;

                         }

                        

                        

                        

                    ]]>

               </fx:Script>

           

               <s:Button x="10" y="10" label="Zoom in" click="zoomInHandler(event)"/>

               <s:Button x="88" y="10" label="Reset zoom" click="resetZoomHandler(event)"/>

               <s:Button x="181" y="10" label="Zoom out" click="zoomOutHandler(event)"/>

               <mx:HTML id="html" x="10" y="39" width="1057" height="621" location="http://www.google.com"/>

              

          </s:WindowedApplication>

           

           

           

          hth,

          kind regards,

          Peter Blazejewicz

           

          added Github gist as code snippet is modified here

          • 2. Re: Webkit Page Zooming or Scaling in HTML Control
            Tim John Level 1

            Great, thanks Peter.

             

            Don't suppose there's a way of maintaining that zoom level? Currently every new location resets zoom to 1 and I have to wait until a COMPLETE event before I can change it again...

            • 3. Re: Webkit Page Zooming or Scaling in HTML Control
              blazejewicz Level 4

              Hi Tim,

              I feel this is feature request to be filled for Adobe,

              In the meantime we had to maintain state as you noted, something like in below:

               

              import mx.events.FlexEvent;

              //

              protected function applicationCompleteHandler(event:FlexEvent):void

              {

                   var htmlLoader:HTMLLoader = html.htmlLoader;

                   htmlLoader.addEventListener(Event.COMPLETE, completeEventHandler);

                   htmlLoader.addEventListener(Event.LOCATION_CHANGE, locationChangeHandler);

              };

              //

              private var zoomChangedFlag:Boolean = false;

              private var currentZoom:Number = 1.0;

              //

              protected function zoomInHandler(event:MouseEvent):void

              {

                   currentZoom += 0.25;

                   updateZoom();

              };

               

              protected function resetZoomHandler(event:MouseEvent):void

              {

                   currentZoom = 1.0;

                   updateZoom();

              };

               

              protected function zoomOutHandler(event:MouseEvent):void

              {

                   currentZoom -= 0.25;

                   updateZoom();

              };

              //

              protected function updateZoom():void

              {

                   if(zoomChangedFlag == false) zoomChangedFlag = true;

                   try

                   {

                        html.htmlLoader.window.document.body.style.zoom = currentZoom;

                   } catch(error:Error){/*  break-through */};

                   if(currentZoom == 1.0) zoomChangedFlag = false;

              }

              //

              protected function completeEventHandler(event:Event):void

              {

                   if(zoomChangedFlag)

                   {

                        updateZoom();

                   }

                   html.htmlLoader.visible = true;

              };

              //

              protected function locationChangeHandler(event:Event):void

              {

                   html.htmlLoader.visible = false;

              };

               

              regards,

              Peter

              1 person found this helpful
              • 4. Re: Webkit Page Zooming or Scaling in HTML Control
                Tim John Level 1

                That's what I had done originally. Thanks for confirming though! Is it me, or is the Webkit browser in AIR really slow??

                • 5. Re: Webkit Page Zooming or Scaling in HTML Control
                  blazejewicz Level 4

                  Hi Tim,

                  there could be several reason of perceived "slowness" I think. One could always run sun spider test:

                  http://www.webkit.org/perf/sunspider/sunspider.html

                  Also WebKit 531 (I think that is version used in html hosting) is version that was shipped two years ago (summer 2009) with Safari 4 I think. So compared to non-hosted browser on the market now (Chrome 13/WebKit nightly/Safari 5) it will be out-run in all tests.

                   

                  regards,

                  Peter