关于Flex 4&ActionScript 3和JavaScript的交互

原创
2016/10/21 13:38
阅读数 18

Flex中可以监听浏览器窗口的大小变化,但有些时候浏览器大小的变化flex不能直接监听到,因为该窗口不是顶层窗口,所以就需要在javascript中获得浏览器的大小,然后通过js通知给as3,再在flex界面中做相应的改变。
使用javascript来获得浏览器窗口的大小是要修改flex工程中的html-template文件夹下面的index.template.html文件(此处的工程是flex web工程)。
需要添加如下代码来实现获得浏览器窗口大小:

<!-- 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
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部