flex和javascript之間的交互

flex中能夠監聽瀏覽器窗口的大小變化，但有些時候瀏覽器大小的變化flex不能直接監聽到，由於該窗口不是頂層窗口，因此就須要在javascript中得到瀏覽器的大小，而後經過js通知給as3，再在flex界面中作相應的改變。

使用javascript來得到瀏覽器窗口的大小是要修改flex工程中的html-template文件夾下面的index.template.html文件。

須要添加以下代碼來實現得到瀏覽器窗口大小：

<!-- scwidth or scheight -->

                var winWidth = 0;   

    var winHeight = 0; 

    function findDimensions() {   

    //獲取窗口寬度  

    if (window.innerWidth) {

     winWidth = window.innerWidth;

    } 

    else if ((document.body) && (document.body.clientWidth)) {

     winWidth = document.body.clientWidth; //獲取窗口高度  

    }

    

    if (window.innerHeight)

    { 

     winHeight = window.innerHeight;  

    }

    else if ((document.body) && (document.body.clientHeight)){

     winHeight = document.body.clientHeight;   

    }

    //經過深刻Document內部對body進行檢測，獲取窗口大小  

    if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)

    {  

    winHeight = document.documentElement.clientHeight;  

    winWidth = document.documentElement.clientWidth;  

    }

    if(isReady()){

      var str = winWidth+","+winHeight;

      sendToActionScript(str);

     }   

   }  

   window.onresize=findDimensions;

   var jsReady = false;

   function isReady() {

      return jsReady;

   }

   function pageInit() {

      jsReady = true;

      //調用函數，獲取數值  

     findDimensions();  

   }

   function thisMovie(movieName) {

      if (navigator.appName.indexOf("Microsoft") != -1) {

          return window[movieName];

      } else {

          return document[movieName];

      }

   }

        // 將變化的數值發送給actionscript

   function sendToActionScript(value) {

      thisMovie("${application}").sendToActionScript(value);

   }

   function sendToJavaScript(value) {

     findDimensions();

   }

須要在body標籤中調用onload函數pageInit()；

下面就須要在flex中來處理與js的交互了。

相關代碼以下：

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

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

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

   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

   xmlns:sRGroup="sRGroup.*"

   creationComplete="application1_creationCompleteHandler(event)"

   addedToStage="application1_addedToStageHandler(event)">

<fx:Declarations>

<!-- 將非可視元素（例如服務、值對象）放在此處 -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.FlexEvent;

import mx.events.ResizeEvent;

protected function application1_creationCompleteHandler(event:FlexEvent):void

{

if (ExternalInterface.available) {

try {

ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);

if (checkJavaScriptReady()) {

ExternalInterface.call("sendToJavaScript","getWH");

} else {

var readyTimer:Timer = new Timer(100, 0);

readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);

readyTimer.start();

}

} catch (error:SecurityError) {

Alert.show("A SecurityError occurred: " + error.message);

} catch (error:Error) {

Alert.show("An Error occurred: " + error.message);

}

}

}

/**網頁js 發來的數據接收函數*/

private function receivedFromJavaScript(value:String):void {

var array:Array = value.split(",");

this.width = array[0];

this.height = array[1];

// Alert.show("舞臺尺寸改變"+this.width+"------"+this.height);

}

/**檢測網頁是否加載完畢*/

private function checkJavaScriptReady():Boolean {

var isReady:Boolean = ExternalInterface.call("isReady");

return isReady;

}

/**循環檢測網頁是否加載完畢*/

private function timerHandler(event:TimerEvent):void {

var isReady:Boolean = checkJavaScriptReady();

if (isReady) {

//中止timer

var str:String = ExternalInterface.call("sendToJavaScript","getWH");

Alert.show(str);

Timer(event.target).stop();

}

}

protected function application1_addedToStageHandler(event:Event):void

{

//添加舞臺尺寸改變數據

this.addEventListener(ResizeEvent.RESIZE,onResize);

}

private function onResize(evt:Event):void

{

Alert.show("舞臺尺寸改變"+stage.width+"------"+stage.height);

}

]]>

</fx:Script>

<s:Button x="0" y="0" label="按鈕"/>

<s:Button right="0" bottom="0" label="按鈕" id="btn2"/>

</s:Application>

注意：application1_addedToStageHandler須要添加到舞臺的。