flex4与JavaScript交互

最新推荐文章于 2021-06-08 22:51:15 发布

最新推荐文章于 2021-06-08 22:51:15 发布 · 113 阅读

文章标签：

#JavaScript #Flex #Adobe #IE #Firefox #ViewUI

Flex 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用Flex开发的应用程序如何与JavaScript进行交互的方法。通过具体的代码示例，展示了如何在Flex中调用JavaScript函数及反之亦然的过程。

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

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里面有我们想要的代码：

<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页面结合：

<!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通过测试。