JS Flex交互:html嵌套Flex(swf)

一.html页面嵌套Flex需要用到 swfobject.js

swfobject的使用是非常简单的，只需要包含 swfobject.js这个js文件，然后在DOM中插入一些简单的JS代码，就能嵌入Flash媒体资源了。

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5个必须的参数和4个可选的参数：

1. swfUrl（String，必须的）指定SWF的URL。

2. id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。

3. width（String，必须的）指定SWF的宽。

4. height（String，必须的）指定SWF的高。

5. version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。

6. expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。

7. flashvars（String，可选的）用name:value对指定你的flashvars。

8. params（String，可选的）用name:value对指定你的嵌套object元素的params。

9. attributes（String，可选的）用name:value对指定object的属性。

swfobject.js下载网址http://code.google.com/p/swfobject/

把Flex项目拷贝到tomcat webapps 目录下并且启动,也可以将项目生成SWC文件。

下面是一个最简单的范例：

interaction.js

 function LoadFlex(name){
this.name = name;//name="flexDiv" flexDiv为 html页面中的用来嵌套flex   <div id="flexDiv">/div><  的id
var flashvars = {};
var params = {};
attributes = {};
params.allowScriptAccess = "always";
params.scale = "nocale";
swfobject.embedSWF("http://192.168.1.102:8088/FlexApp/FlexApp.swf", name,"100%","100%", "10.2.0", "", flashvars, params, attributes);
}

JSApp.html

<!DOCTYPE HTML PUBLICd "-//W3C//DTD HTML 4.000%1 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图接口</title>
<script type="text/javascript" src="lib/interaction.js"></script>
<script type="text/javascript" src="lib/swfobject.js"></script>
<script>
var jsApp;
function init(){
jsApp = new LoadFlex("flexDiv");
}
</script>
</head>
<body  οnlοad="init()"  width="100%" height="100%">
<div>     <label> Flex说：</label> <input id="flexSay" /> <input  id="jsinput" value="你好Flex" /> <button >Send</button>  </div>
<table width="100%" height="100%">
<td>  <div id="flexDiv" width="100%" height="100%" style="display:block">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
</td>
</table>
</body>
</html>

FlexApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" preloader="MyPreloader"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
applicationComplete="init()"              >
<fx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import flash.system.Security;
import mx.controls.Alert;
import mx.events.FlexEvent;


public function init():void{
}
public   function onHelloFlex(str:String):String{
js.text = str;
return "你好javaScript";
}
public  function onFlexToJS(ste:String):void{
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:VBox width="100%" height="100%" horizontalAlign="left" verticalAlign="middle" backgroundColor="#EAE3E3">
<s:Panel width="100%" height="500" chromeColor="#1E1E1E" title="javascript   and   flex 交互" color="#FCF9F9" fontWeight="bold" fontSize="14">
<mx:VBox height="100%" width="100%">
<mx:HBox height="100%">
<mx:HBox width="270" height="200" paddingTop="10">
<s:Label color="#080808">javaScript说：</s:Label>   <s:TextInput   id="js" color="#020202"/>
</mx:HBox>
<mx:HBox width="380" height="200" paddingTop="10">
<s:Label color="#060606">Flex说：</s:Label>    <s:TextInput  text="你好javaScript"  id="flex" color="#020202"/>
<mx:Button click="onFlexToJS('hell')"    label="send"/>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</s:Panel>
</mx:VBox>
</mx:Application>

效果：

关于javascript与flex交互:http://blog.csdn.net/allen_oscar/article/details/9771395