Apollo入门 - Apollo网络浏览器（2）追加后退按钮

续Apollo入门 - Apollo网络浏览器（1）

追加"Back（后退）"按钮

首先追加一个后退按钮

Code:MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="Move" click="html.location = inputTF.text;"/>
    <!--后退按钮-->
    <mx:Button label="Back" click="back()"/>
    </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%"/>
</mx:ApolloApplication>

在追加的按钮的标签里有一个click="back()"，这是当按下后退按钮时的回调函数。

下面来写back()函数。在MXML里写Actionscript用Script标签。

在mx:HBox的前面添加以下内容：

Code:MXML

<mx:Script>
  <![CDATA[
  // 记录历史的数组
  private var history:Array = new Array();
  private function back():void {
    if (history.length > 1) {
      history.pop(); // 移除现在的URL
      var prevURL:String = history[history.length - 1]; // 得到前一个URL
      html.location = prevURL; // 变更HTML组件
      inputTF.text = prevURL; // 变更输入框
    }
  }
  ]]>
</mx:Script>

接着，在URL变更时在history数组里添加一个新的历史记录。

当HTML组件读取完毕时会触发complete事件。所以在HTML组件的标签加上complete="pushURL(event)"。

Code:MXML

<mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>

下面来添加pushURL()函数。

Code:Actionscript

private function pushURL(e:Event):void {
  // 添加新的URL
  history.push(html.location);
  // 变更输入框
  inputTF.text = html.location;
}

以下为全部代码。

Code:MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
    // 记录历史的数组
    private var history:Array = new Array();
    private function back():void {
      if (history.length > 1) {
        history.pop(); // 移除现在的URL
        var prevURL:String = history[history.length - 1]; // 得到前一个URL
        html.location = prevURL; // 变更HTML组件
        inputTF.text = prevURL; // 变更输入框
      }
    }
    private function pushURL(e:Event):void {
      // 添加新的URL
      history.push(html.location);
      // 变更输入框
      inputTF.text = html.location;
    }
    ]]>
  </mx:Script>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://"/>
    <mx:Button label="Move" click="html.location = inputTF.text;"/>
    <!--后退按钮-->
    <mx:Button label="Back" click="back()"/>
    </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" complete="pushURL(event)"/>
</mx:ApolloApplication>

比如我在文本框里输入了http://www.google.cn，点击Move后，就出现了以下画面。