使用HTMLLoader制作简单的网页浏览器

HTMLControl class使用起来没Flex HTML控件那么方便,但更轻量灵活。下面的实例就使用这个类制作一个简单的网页浏览器。

HTMLControl class是DisplayObject的类,我们可以像其它DisplayObject实例一样将其添加到显示列表中。我们可以使用load()方法将指定的站点中的数据加载HTMLLoader对象中。与Flex HTML控件一样,可以使用historyBack()方法在此控件的历史记录列表中向后导航,historyForward()方法在此控件的历史记录列表中向前导航。

首先,创建UI,在Flash CS3的舞台中放置按钮backBtn、按钮forwardBtn、输入文本urlInput和按钮goBtn,并设置相应的宽度。在库中添加UIScrollBar组件。

新建文档类AIRWebBrowser,添加下面的代码:

package { 
    import flash.events.KeyboardEvent; 
    import flash.events.MouseEvent; 
    import flash.events.Event; 
    import flash.display.Sprite; 
    import fl.events.ScrollEvent; 
    import flash.html.HTMLLoader; 
    import fl.controls.ScrollBar; 
    import flash.display.StageScaleMode; 
    import flash.display.StageAlign; 
    import flash.net.URLRequest; 
    import flash.ui.Keyboard; 
  
    public class AIRWebBrowser extends Sprite { 
  
        private var htmlLoader:HTMLLoader; 
        private var vScrollBar:ScrollBar; 
        private var hScrollBar:ScrollBar; 
  
        public function AIRWebBrowser() { 
            stage.scaleMode = StageScaleMode.NO_SCALE; 
            stage.align = StageAlign.TOP_LEFT; 
            seupUI(); 
            seupEvent(); 
        } 
  
        private function seupUI():void { 
            htmlLoader = new HTMLLoader(); 
            htmlLoader.x = 10; 
            htmlLoader.y = 45; 
            htmlLoader.width = stage.stageWidth - 40; 
            htmlLoader.height = stage.stageHeight - 100; 
            addChild( htmlLoader ); 
  
            vScrollBar = new ScrollBar(); 
            vScrollBar.direction = "vertical"; 
            vScrollBar.x = htmlLoader.x + htmlLoader.width; 
            vScrollBar.y = htmlLoader.y; 
            vScrollBar.height = htmlLoader.height; 
            vScrollBar.lineScrollSize = 15; 
            vScrollBar.pageSize = htmlLoader.height; 
  
            hScrollBar= new ScrollBar(); 
            hScrollBar.direction = "horizontal"; 
            hScrollBar.x = htmlLoader.x; 
            hScrollBar.y = htmlLoader.y + htmlLoader.height; 
            hScrollBar.width = htmlLoader.width; 
            hScrollBar.lineScrollSize = 15; 
            hScrollBar.pageSize = htmlLoader.width; 
        } 
  
        private function seupEvent():void { 
            stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler); 
            goBtn.addEventListener( MouseEvent.CLICK, goClickHandler); 
            htmlLoader.addEventListener(Event.HTML_DOM_INITIALIZE, domInitHandler); 
            htmlLoader.addEventListener(Event.HTML_RENDER, renderHandler); 
            htmlLoader.addEventListener(Event.COMPLETE, loadCompleteHandler); 
            backBtn.addEventListener(MouseEvent.CLICK, goBackHandler); 
            forwardBtn.addEventListener(MouseEvent.CLICK, goForwardHandler); 
            vScrollBar.addEventListener(ScrollEvent.SCROLL, vScrollHandler); 
            hScrollBar.addEventListener(ScrollEvent.SCROLL, hScrollHandler); 
        } 
  
        private function keydownHandler(event:KeyboardEvent):void { 
            if (event.keyCode == Keyboard.ENTER) { 
                goURL(); 
            } 
        } 
  
        private function goClickHandler(event:MouseEvent):void { 
            goURL(); 
        } 
  
        private function domInitHandler(event:Event):void { 
            updateHTMLHistory(); 
        } 
  
        private function renderHandler(event:Event):void { 
            updateScrollBars(); 
        } 
  
        private function loadCompleteHandler(event:Event):void { 
            updateTitle(); 
            addChild(vScrollBar); 
            addChild(hScrollBar); 
        } 
  
        private function goBackHandler(event:MouseEvent):void { 
            htmlLoader.historyBack(); 
        } 
  
        private function goForwardHandler(event:MouseEvent):void { 
            htmlLoader.historyForward(); 
        } 
  
        private function vScrollHandler(event:ScrollEvent):void { 
            htmlLoader.scrollV = event.position; 
        } 
  
        private function hScrollHandler(event:ScrollEvent):void { 
            htmlLoader.scrollH = event.position; 
        } 
  
        private function goURL():void { 
            var url:String = urlInput.text; 
            if (url.indexOf("http://") == -1 && url.indexOf("file:///") == -1) { 
                url = "http://" + url; 
            } 
            htmlLoader.load(new URLRequest(url)); 
        } 
  
        private function updateTitle():void { 
            stage.nativeWindow.title = htmlLoader.window.document.title; 
            if (htmlLoader.window.document.title) { 
                  
            } else { 
                stage.nativeWindow.title = htmlLoader.location; 
            } 
            trace(stage.nativeWindow.title); 
        } 
        private function updateLocation(location:String):void { 
            urlInput.text = location; 
        } 
  
        private function updateScrollBars():void { 
            if (htmlLoader.contentHeight > htmlLoader.height) { 
                vScrollBar.visible = true; 
                vScrollBar.minScrollPosition = 0; 
                vScrollBar.maxScrollPosition = htmlLoader.contentHeight - htmlLoader.height; 
            } else { 
                vScrollBar.visible = false; 
            } 
            if (htmlLoader.contentWidth > htmlLoader.width) { 
                hScrollBar.visible = true; 
                hScrollBar.minScrollPosition = 0; 
                hScrollBar.maxScrollPosition = htmlLoader.contentWidth - htmlLoader.width; 
            } else { 
                hScrollBar.visible = false; 
            } 
        } 
  
        private function updateHTMLHistory():void { 
            if (htmlLoader.historyPosition == 0) { 
                backBtn.enabled = false; 
            } else { 
                backBtn.enabled = true; 
            } 
            if ( htmlLoader.historyPosition == ( htmlLoader.historyLength - 1 ) ) { 
                forwardBtn.enabled = false; 
            } else { 
                forwardBtn.enabled = true; 
            } 
            updateLocation(htmlLoader.location); 
        } 
    } 
}

事实上,使用HTMLLoader Class比Flex HTML控件实现起来要麻烦得多,Flex HTML控件继承了ScrollControlBase class,因此自动为HTML内容添加滚动条。而对于HTMLLoader对象,我们不得不手动添加这部分代码。htmlLoader的contentWidth contentHeight属性可以获取HTML内容的宽度和高度,当发生htmlRender事件时,他们的值会改变,再与htmlLoader对象本身的宽度和高度比较来决定是否显示滚动条。

点击此处下载该实例的源码。

发表评论