Flex4与JavaScript交互

来源：互联网发布：淘宝店家开通花呗条件编辑：程序博客网时间：2024/06/03 07:35

利用flex来开发程序很快，有时难免会和js交互.

flex代码：

Flex代码  
<?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" height="24" width="71"  
               creationComplete="{init()}">  
      
    <fx:Script>  
        <![CDATA[  
              
            public function init():void{  
                ExternalInterface.addCallback("callFlex",callFlex);  
                btnCallJs.addEventListener(MouseEvent.CLICK,btnCallJsHandler);  
            }  
              
            public function callFlex(data:*):*{  
                data.password = "password";  
                return data;  
            }  
              
            public function btnCallJsHandler(evt:MouseEvent):void{  
                var data:Object = new Object();  
                data.userName = "chenjun";  
                var result:String = ExternalInterface.call("callJs",data);  
                btnCallJs.label = result;  
            }  
              
              
        ]]>  
    </fx:Script>  
      
    <fx:Declarations>  
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
    </fx:Declarations>  
    <s:Button x="0" y="0" id="btnCallJs" label="calljs" height="24"/>  
</s:Application>  

编译后会自定生成以下文件：

AsVSJs.html里面有我们想要的代码：

Js代码  
<script type="text/javascript" src="swfobject.js"></script>  
        <script type="text/javascript">  
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->   
            var swfVersionStr = "10.0.0";  
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->  
            var xiSwfUrlStr = "playerProductInstall.swf";  
            var flashvars = {};  
            var params = {};  
            params.quality = "high";  
            params.bgcolor = "#ffffff";  
            params.allowscriptaccess = "sameDomain";  
            params.allowfullscreen = "true";  
            var attributes = {};  
            attributes.id = "AsVSJs";  
            attributes.name = "AsVSJs";  
            attributes.align = "middle";  
            swfobject.embedSWF(  
                "AsVSJs.swf", "flashContent",   
                "71", "24",   
                swfVersionStr, xiSwfUrlStr,   
                flashvars, params, attributes);  
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->  
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");  
        </script>  

将以上信息和自己的index.html页面结合：

Html代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>as vs js</title>  
<script type="text/javascript" src="swfobject.js"></script>  
<script type="text/javascript">  
    var swfVersionStr = "10.0.0";  
    var xiSwfUrlStr = "playerProductInstall.swf";  
    var flashvars = {};  
    var params = {};  
    params.quality = "high";  
    params.bgcolor = "#ffffff";  
    params.allowscriptaccess = "sameDomain";  
    params.allowfullscreen = "true";  
    var attributes = {};  
    attributes.id = "AsVSJs";  
    attributes.name = "AsVSJs";  
    attributes.align = "middle";  
    swfobject.embedSWF(  
        "AsVSJs.swf", "flashContent",   
        "71", "24",   
        swfVersionStr, xiSwfUrlStr,   
        flashvars, params, attributes);  
  
    function callJs(data){  
        document.getElementById("userName").innerHTML = data.userName;  
        return "ok";  
    }  
  
    function btnCallFlexHandler(){  
        var flexApp = document.getElementById("AsVSJs");  
        var data = new Object();  
        data.userName = 'chenjun';  
        try{  
            data = flexApp.callFlex(data);    
        }catch(e){  
            alert(e);  
        }  
        document.getElementById("password").innerHTML = data.password;  
    }  
</script>  
</head>  
<body>  
<div>  
    flex-->userName:<span id="userName"></span>  
    <div id="flashContent"></div>  
    <div>   
        flex-->password:<span id="password"></span><br/>  
        <input type="button" id="btnCallFlex" value="callFlex" onclick="btnCallFlexHandler()"/>  
    </div>  
</div>  
  
  
  
</body>  
</html>  

可以测试调用过程了，ie，Firefox通过测试。

0 0