您的位置：首页 > Web前端 > JavaScript

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

2013-08-04 09:04 253 查看

一.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  onload="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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js加载Flex html嵌套flex javascript 加载flex
相关文章推荐
新的分享
章节导航