flex和javascript之间的交互

原创
2013/02/01 14:47
阅读数 255
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需要添加到舞台的。


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
6 收藏
0
分享
返回顶部
顶部