[教學] Flash 支援瀏覽器上一頁、下一頁

當Web 2.0 面世後, 大大小小的網頁, 採用局部更新頁面. 瀏覽速度得以提升, 整合更為友善.
令使用習慣改變, 瀏覽器喪失基本功能. 上一頁與下一頁, 在應用AJAX 或Flash 是一件苦惱事情. 只有極少數網頁(Gmail 等等), 還照顧這個用戶習慣.

Flash 支援瀏覽器上一頁、下一頁, 我們可以使用jQuery history (不建議使用Really Simple History, 因為支援度和穩定性不足), 為大家介紹一個簡單範例:


範例功能:

1. 在Flash 按下按鈕, 然後修改URL 路徑
2. 按瀏覽器上一頁或下一頁, 在不更新頁面情況下, 改變Flash 內容
3. 在瀏覽器輸入URL 路徑, Flash 的起始頁為該內容

請按 [觀看] 範例

範例使用的JavaScript 程式庫:

• jquery-1.6.4.min.js - 因jquery.history plugin 是基於jQuery 建構成, 這個程式庫是必須
• jquery.history.js - 支援瀏覽器上一頁與下一頁功能. 它支援的瀏覽器類型:
    - Internet Explorer 6, 7, and 8+
    - Safari 4 and 5+
    - Google Chrome 4+
• swfobject.js - 在不同瀏覽器上, 提供插入SWF 一致方法

範例使用的Action Script 類別:

• ExternalInterface - 在Flash 提供介面呼叫HTML 層面的JavaScript

範例說明:

• 當使用戶在Flash 按下"Page 4" 按鈕時
  
  在Action Script 層面, 收到Mouse 事件後, 我們呼叫外部JavaScript 的"addHistory"
  

  function clickP4Handler(event:MouseEvent):void{
    var location:String = "p4";
    ExternalInterface.call("addHistory", location);
    changeLocationHandler(location);
  }
  this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
  

  
  在JavaScript 層面, 利用window.location 修改URL 路徑
  (請不要使用Flash 的navigatorToURL() 修改, 因每個瀏覽器解讀是不一致)
  

  function addHistory(location){
    window.location = "#"+location;
  }
  

  
  
• 在Action Script 層面登錄"changeLocation", 提供給JavaScript 呼叫
  
  由於ExternalInterface 登錄, 必須等待Flash Player 在HTML 層面完成載入. 在Action Script 我們會不斷呼叫"checkFunction", 查詢是不否完成載入
  

  function enterFrameHandler(event:Event):void{
    if(ExternalInterface.call("checkFunction"))
      this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
    ExternalInterface.addCallback("changeLocation", changeLocationHandler);
  }
  this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
  

  
  在JavaScript 層面, 測試Flash Player 是否完成載入
  

  function checkFunction(){
    return document.getElementById("jquery_history").changeLocation!=undefined;
  }
  

  
  
• 最後, 當用戶按瀏覽器上一頁或下一頁
  
  在JavaScript 層面, 收到history 事件改變, 我們呼叫外部Action Script 的"changeLocation"
  

  jQuery(document).ready(function($) {
    function load(loc) {
      if(checkFunction())
        document.getElementById("jquery_history").changeLocation(loc);
      lastLocation = loc;
    }
    $.history.init(function(url) {
      load(url == "" ? "1" : url);
    });
    $('#ajax-links a').live('click', function(e) {
      var url = $(this).attr('href');
      url = url.replace(/^.*#/, '');
      $.history.load(url);
      return false;
    });
  });
  

  
  在Action Script 層面, "changeLocation" 把內容gotoAndStop 跳至合適位置
  

  function changeLocationHandler(location:String):void{
    switch(location){
      default:
      case "p1": contentMc.gotoAndStop(1); break;
      case "p2": contentMc.gotoAndStop(2); break;
      case "p3": contentMc.gotoAndStop(3); break;
      case "p4": contentMc.gotoAndStop(4); break;
    }
  }

範例可在Internet Explorer, Safari, Google Chrome, Firefox, Opera... 等等, 運作正常.
大家可以 [下載], 然後一齊看看, 做一個友善的Flash 平台.