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

最新推荐文章于 2024-08-29 10:48:08 发布

Allen_Oscar

最新推荐文章于 2024-08-29 10:48:08 发布

阅读量3.5k

点赞数 3

分类专栏： flex 文章标签： js加载Flex html嵌套flex javascript 加载flex

本文链接：https://blog.csdn.net/allen_oscar/article/details/9744265

版权

flex 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.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>

效果：