文档章节

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

Rocky_Sky
 Rocky_Sky
发布于 2016/10/21 13:38
字数 625
阅读 1
收藏 0

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需要添加到舞台的。
至此,之前的问题完美解决。

© 著作权归作者所有

Rocky_Sky
粉丝 6
博文 28
码字总数 33396
作品 0
杭州
前端工程师
私信 提问
JavaScript与Flex的ActionScript相互调用的方法

在JavaScript中调用Flex方法原理 Flex与JavaScript交互中如何用Flex调用JavaScript 总结Flex与浏览器交互

小微
2012/05/14
0
0
JavaScript (js) 和Flex交互总结(IE&&非IE浏览器)

首先,不管是Flex调用js,还是js调用 Flex 需要引入的包(Flex包)import flash.external.*; 其次,简单说说相互之间如何调用 1、Flex程序调用js的方法 : 这个相对简单,如下 Flex中: publ...

soul_mate
2014/06/23
0
1
2010(Flex 初次使用 小节:No.2)

接这上一篇继续... 2 借助第三方的对象文件 swfobject.js 来向swf 传参 超链接的方式传参 <a href="VideoPlay.html?address=http://www.lxzq.com.cn/video/ty20100915_1.flv">Test</a> 接收参......

Zofda
2012/02/28
0
0
Flex Javascript 交互实现代码

关键字:ExternalInterface 所用类库:SWFObject / Flex调用Javascript函数 @params functionName:String Javascript函数名称 @params ...params Javascript函数参数 @return 返回Javascrip......

SeanCai
2011/03/29
0
0
从reactjs看flex的设计哲学

前两天收到了《react引领未来的用户界面开发框架》,因为一直在从事flex的开发,自然比较,自然发现其中80%的雷同之处。深度怀疑react的开发者是曾经的flex开发者一员,或者是仿冒,但是做到了...

fir01
2016/02/21
782
2

没有更多内容

加载失败,请刷新页面

加载更多

docker百万连接设置相关资料

借助Docker单机秒开数十万TCP连接

youngjdong
2分钟前
0
0
这可能是史上最全 Redis 高可用解决方案总结

本文主要针对 Redis 常见的几种使用方式及其优缺点展开分析。 一、常见使用方式 Redis 的几种常见使用方式包括: 1.Redis 单副本; 2.Redis 多副本(主从); 3.Redis Sentinel(哨兵); 4....

别打我会飞
4分钟前
0
0
Qt编写数据可视化大屏界面电子看板11-自定义控件

一、前言 说到自定义控件,我是感觉特别熟悉的几个字,本人亲自原创的自定义控件超过110个,都是来自各个行业的具体应用真实需求,而不是凭空捏造的,当然有几个小控件也有点凑数的嫌疑,在编...

飞扬青云
7分钟前
0
0
第二讲:编写UDP Socket小程序

1、编写服务器端代码 文件-->新建 新建一个控制台程序: 下面用的是一张旧图,只要点确认就可以了。 切换到FileView视图 编译、链接 StdAfx.cpp( 里面的代码不用修改) 编辑UDPServer.cpp文...

一匹狼工作室
7分钟前
1
0
android ------ 实现高德定位并获取相应信息 ( 最新版高德SDK 和 Android SDK版本)

Android开发项目时常常会遇到定位这个功能, 很久以前写过一篇了,官方也更新了一些东西,我也更新下 以前使用的是jar包 导入来实现高德定位 老版本 链接:https://blog.csdn.net/DickyQie/...

切切歆语
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部