`
bdk82924
  • 浏览: 562185 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Flex与Javascript之间的交互

 
阅读更多

转:http://blog.csdn.net/hopestar2/archive/2010/06/29/5702171.aspx

 

最近做的一个项目要用到Flex与Javascrip之间的交互,所以花时间学习了一下。在

网上找了好多关于这方面的文章,但是介绍的都不是很全面,主要是例子程序写的不是很

好,很多都还存在一些问题,download下来后,发现还要做些修改才能运行。

      先分别简要介绍一下Flex调用Javascript函数和Javascript调用Flex函数。

      1. Flex调用Javascript函数

      Flex通过使用ExternalInterface.call()函数来调用Javascript中的方法,此函数的原型为

ExternalInterface.call(function_name:String, parameter:String),参数function_name

是调用的javascript的函数名,parameter是Javacript函数需要的参数。此函数还可以有返回值

,也就是说Javascript函数可以返回一个结果给ExternalInterface.call()这个函数调用.ExternalInterface

封装了对浏览器支持的检查,可以用available属性来查看。

      先举个简单的例子:

      Javascript函数:

      function sayHelloFromJs(message)

      {

              alert(message);  //message是由flex端传过来的

              return "echo from javascript:" + message; //返回给Flex端的消息

       }

      Flex调用:

      var str:String = ExternalInterface.call("sayHelloFromJs","Hello,Javascript.");

      Alert.show(str); //显示javascript端返回的消息

      2. Javascript调用Flex函数:

       Flex端需要注册和页面交互的Javascript方法。通过ExternalInterface的addCallback()函数实现,

addCallback()函数的原型为addCallback(js_function:String, flex_function:Function),第一个参数

js_function是Javascript可以调用的方法名称,第二个参数flex_function是Javascript回调的Flex方法.

      举个简单的例子:

      Flex端:

      public function sayHelloFromFlex(message:String):String

     {

           Alert.show(message); //Javascript端传过来的消息

           var str:String = "echo from flex:" + message;

           return str; //返回给Flex端的消息

     }

     public function initApp()

     {

            ExternalInterface.addCallback("sayHelloFromFlex",sayHelloFromFlex);//注册与页面交互的方法

     }

     Javascript端:

     在javascript端首先要获取swf对象的引用,我们假设我们已经拿到了该引用,为MyFlexApp.

swf的获取将在下面专门介绍。

     <script language = 'Javacript' charset = 'uft-8'>

     function testFlexFunc()

     {

           var strMessage = MyFlexApp.sayHelloFromFlex("Hello, Flex");

           alert(strMessage);

     }

    </script>

    <button onclick="testFlexFunc()"> TestFlexFunc</button>

 

      3.  Javascript端获取swf对象的引用:

      在Javascript代码中,我们首先要定义一个object标签对象,object标签对象的大概格式

如下:

<object type='application/x-shockwave-flash'
 data='FlexAndJs.swf' width='600' height='480'
 name='test' id='MyFlexApps'>

 <param name='allowScriptAccess' value='always' />
 <param name='movie' value='FlexAndJs.swf' />
 <param name='quality' value='high' />
 <param name='scale' value='noScale' />
 <param name='wmode' value='transparent' />

<embed src="FlexObject.swf" width="640" height="378"
   name ="FlexObject"
   play="true"
   loop="false"
   allowScriptAccess="sameDomain"
   type="application/x-shockwave-flash"
   pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>

</object>

   定义好这个节点标签后,我们还需要在写一个JS函数来获取该swf对象的引用。

function getSWFObject(movieName)

{

   if(document[movieName])
   {
         return document[movieName];
   }else if(window[movieName]){
        return window[movieName];
   }else if(document.embeds && document.embeds[movieName]){
        return document.embeds[movieName];
   }else{
        return document.getElementById(movieName);
   }

}

   然后上面2中的testFlexFunc()函数的那条调用Flex函数的语句可以改写为:

var strMessage = getSWFObject["MyFlexApps"].sayHelloFromFlex("Hello, Flex");

最后给出一个完整的例子供大家参考,包括Flex端和JS端的完整代码:

Flex代码:

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"
layout="absolute" width="200" height="160">
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  public function sayHelloFromFlex(message:String):String{
   Alert.show(message);
   var str:String = "Echo from Flex: "+ message;
   return str;
  }
  public function initApp():void {
   Security.allowDomain("*");
   Security.allowInsecureDomain("*");
   ExternalInterface.addCallback("sayHelloFromFlex",sayHelloFromFlex);
  }
  public function invokeJsFunc():void {
   var str:String = ExternalInterface.call("sayHelloFromJs","Hello,Javascript.");
   Alert.show(str);
  }    
 ]]>
</mx:Script>
<mx:Button x="39" y="68" label="Invoke JS Function" click="invokeJsFunc()"/>
</mx:Application>

Html代码:

<html>
  <head> </head>
  <body scroll="no">
  <script>
  function sayHelloFromJs(value){
        alert(value);
        return "Echo from Js: " + value;
    }
 
  function invokeFlexFunc(){
        var message = "Hello,Flex.";
        var str = getSWFObject("MyFlexApps").sayHelloFromFlex(message);
        alert(str);
    }
  function getSWFObject(movieName)
  {
   if(document[movieName])
   {
    return document[movieName];
   }else if(window[movieName]){
    return window[movieName];
   }else if(document.embeds && document.embeds[movieName]){
    return document.embeds[movieName];
   }else{
    return document.getElementById(movieName);
   }
  }
</script>
  <object type='application/x-shockwave-flash'
 data='FlexAndJs.swf' width='200' height='160'
 name='test' id='MyFlexApps'>
 <param name='allowScriptAccess' value='always' />
 <param name='movie' value='FlexAndJs.swf' />
 <param name='quality' value='high' />
 <param name='scale' value='noScale' />
 <param name='wmode' value='transparent' />
  </object>
  <input type="button" value="InvokeFlexFunction" onclick="invokeFlexFunc()"/>
  </body>
</html>

 

 

swfobject.embedSWF js直接加载SWF文件

转自:http://snanychen.blog.163.com/blog/static/75197159201010253381109/

JS+flash的焦点幻灯片既能大方得体的展示焦点信息,也能美轮美奂的展示图片,越来越多的网站使用这种焦点幻灯的表现方法。很 多童鞋在下载这方面的素材代码的时候,往往会因为展示出来的是flash,觉得难以修改。其实不然,只要细心寻找答案,会发现很多参数是可以在html页 面直接修改的。下面就介绍如何利用swfobject.embedSWF来修改输出的flash的属性。

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

swfUrl(String,必须的)指定SWF的URL。
id(String,必须的)指定将会被Flash内容替换的HTML元素(包含你的替换内容)的id。
width(String,必须的)指定SWF的宽。
height(String,必须的)指定SWF的高。
version(String,必须的)指定你发布的SWF对应的Flash Player版本(格式为:major.minor.release)。
expressInstallSwfurl(String,可选的)指定express install SWF的URL并激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。
flashvars(String,可选的)用name:value对指定你的flashvars。
params(String,可选的)用name:value对指定你的嵌套object元素的params。
attributes(String,可选的)用name:value对指定object的属性。
例如:

<script type="text/javascript" src="http://snanychen.blog.163.com/blog/swfobject.js"></script>

<script type="text/javascript">
swfobject.embedSWF("myflash.swf", "myflash", "300", "120", "9.0.0");
swfobject.embedSWF("myflash.swf", "myflash", "300", "120", "9.0.0", null, null, {wmode: ‘transparent’});
</script>
<div id="myflash">这里是当flash不能正常显示时显示的内容</div>

怎样配置你的Flash内容?
你可以为你的object元素添加下面这些常用的可选属性(attributes)[ http://www.w3schools.com/tags/tag_object.asp ]:

id
name
styleclass(不使用class,因为class也是ECMA4的保留关键字)
align
你可以使用下面这些专用于Flash的可选param元素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:

play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flahvars
devicefont [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331 ]
allowscriptaccess [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 ]
seamlesstabbing [ http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html ]
allowfullscreen [ http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html ]
allownetworking [ http://livedocs.adobe.com/flash/9.0/main/00001079.html ]
怎样用JavaScript对象来定义你的flashvars、params和attributes?
你最好用对象的字面量(Object literal notation)来定义JavaScrpt对象,例如这样:

 

 

<script type=“text/javascript“>

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
 


 

你可以在定义对象的时候添加你的name:value对(注意:请确保不要再对象中的最后一个name:value对后面加上逗号):

 

 

<script type=“text/javascript“>

var flashvars = {
name1: “hello“,
name2: “world“,
name3: “foobar“
};
var params = {
menu: “false“
};
var attributes = {
id: “myDynamicContent“,
name: “myDynamicContent“
};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
或者在对象创建之后用点号添加属性(properties)和值:

<script type=“text/javascript“>

var flashvars = {};
flashvars.name1 = “hello“;
flashvars.name2 = “world“;
flashvars.name3 = “foobar“;

var params = {};
params.menu = “false“;

var attributes = {};
attributes.id = “myDynamicContent“;
attributes.name = “myDynamicContent“;

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
 


 
 

上面的代码也可以这样写(为那些喜欢俏皮话的顽固脚本程序员准备的不易读的简写版本(the less readable shorthand version for the die-hard scripter who love one-liners)):

 

 

<script type=“text/javascript“>

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, {name1:“hello“,name2:“world“,name3:“foobar“}, {menu:“false“}, {id:“myDynamicContent“,name:“myDynamicContent“});

</script>
 


 

如果你不想使用一个参数,你可以将它定义为false或者一个空对象:

 

 

<script type=“text/javascript“>

var flashvars = false;
var params = {};
var attributes = {
id: “myDynamicContent“,
name: “myDynamicContent“
};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
 

flashvars对象是一个为了增加易用性而设计的作为快捷方式的参数,所以你可以先忽略它,然后在params对象中指定你的 flashvars:

 

 

<script type=“text/javascript“>

var flashvars = false;
var params = {
menu: “false“,
flashvars: “name1=hello&name2=world&name3=foobar“
};
var attributes = {
id: “myDynamicContent“,
name: “myDynamicContent“
};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
 


 
 

提示:使用SWFObject 2.0 HTML和JavaScript代码生成器(SWFObject 2.0 HTML and JavaScript generator)来帮助你创建代码:[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_generator ]。

 

分享到:
评论

相关推荐

    flex和javascript交互例子

    标题"flex和javascript交互例子"指向了这个主题的核心——如何在Flex应用中调用JavaScript函数,以及反过来在JavaScript中调用Flex的方法。这种技术通常被称为“Bridge”或“跨域通信”。 在Flex中,我们可以使用`...

    flex与js交互2

    ### Flex与JavaScript交互详解 #### 一、引言 随着Web技术的发展,不同语言之间的通信变得尤为重要。在Flex与HTML的结合中,Flex通常作为富客户端应用,而JavaScript则负责处理网页逻辑。为了实现二者之间的无缝...

    Flex与JavaScript交互实例

    Flex与JavaScript交互是一种常见的技术,它允许在Adobe Flex(基于ActionScript 3的富互联网应用程序框架)和网页中的JavaScript之间进行通信。这种交互性对于构建混合型应用,特别是在需要利用浏览器内核特性的Web...

    flex与ajax交互、flex与javascript交互.docx

    ### Flex与Ajax交互、Flex与JavaScript交互 #### 一、引言 随着Web技术的发展,Flex作为一种基于Adobe Flash平台的应用开发框架,在企业级应用中曾经非常流行。它提供了丰富的用户界面构建工具,并能够与服务器端...

    Flex与JS交互

    Flex与JavaScript交互是Web开发中的一个重要技术,它允许在Adobe Flash Player或Adobe AIR环境中运行的Flex应用程序与HTML页面中的JavaScript代码进行通信。这种交互性极大地扩展了富互联网应用(RIA)的功能,使得...

    flex和javascript交互

    ### Flex与JavaScript交互详解 #### 一、在JavaScript中调用Flex方法 在Flex与JavaScript进行交互时,可以通过`ExternalInterface`实现从JavaScript调用Flex中的方法。这主要是通过向Flex应用注册特定的公共方法来...

    Flex 与javascript交互、C#读写Cookie

    在实现Flex与JavaScript交互时,你需要: 1. 在Flex端,使用`ExternalInterface.addCallback()`方法注册一个可供JavaScript调用的函数。 2. 在JavaScript端,通过Flash对象(通常是`swfObject`)来调用这个注册的...

    javascript与flex交互

    ### JavaScript与Flex交互知识点 #### 一、简介 在Web开发领域中,JavaScript与Flex的交互是一个非常实用且重要的技术组合。Adobe Flex是一种用于构建和部署丰富的互联网应用程序(RIA)的强大框架,它支持多种...

    Flex3与javascript相互交互验证

    Flex3与JavaScript之间的交互验证是Web开发中的一个重要概念,它允许Adobe Flex应用程序(基于ActionScript 3)与网页上的JavaScript代码进行通信。这种交互性极大地增强了富互联网应用(RIA)的功能,使得Flex组件...

    Flex与Servlet之间数据的交互

    Flex与Servlet之间的数据交互是JavaWeb开发中的一个重要环节,它涉及到客户端富互联网应用程序(RIA)与服务器端数据处理的协同工作。Flex作为一个基于Adobe Flash Player的前端开发框架,主要用于创建具有丰富用户...

    flex与JS交互示例

    Flex与JavaScript交互是Web开发中的一个重要技术,它允许在Adobe Flex应用和HTML页面之间进行数据交换和功能调用。在本示例中,我们将深入探讨如何实现这种交互,并通过具体的步骤来理解其工作原理。 首先,Flex是...

    flex与PHP数据交互教程

    Flex SDK中的Flash Remoting组件支持AMF,使得Flex与PHP之间的数据交互更为高效。PHP可以使用如Zend AMF或PHP AMF Extension等库来处理AMF数据。 5. **Flex与PHP数据交互流程** - 创建Flex客户端:定义UI组件,...

    Flex与Javascript相互调用例子(附源码)

    标题中的“Flex与JavaScript相互调用例子”是指在Adobe Flex应用程序中如何与JavaScript进行交互的实践示例。Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。JavaScript则是一种...

    flex与js交互 关于ExternalInterface使用的小例子

    ExternalInterface是Flex提供的一个API,允许ActionScript(Flex的主要编程语言)代码与JavaScript代码之间建立双向通信桥梁。 **ExternalInterface的基本用法** 1. **启用ExternalInterface**:在Flex中,首先...

    flex 和 javascript 测通

    Flex和JavaScript交互是Web开发中的一个重要领域,尤其在构建富互联网应用程序(RIA)时。这两个技术结合使用,可以实现强大的用户界面和动态功能。本文将深入探讨Flex与JavaScript的交互机制,以及如何实现它们之间...

    C#与flex交互

    标题中的"C#与Flex交互"指的是在开发过程中,使用C#作为后端处理逻辑,而Flex作为前端用户界面,两者之间进行数据和功能的通信。Flex是一种基于Adobe AIR和Flash Player运行时的开源框架,主要用于构建富互联网应用...

    FLEX与JS数据交互,以及Google插件IFrame的使用

    `IFrame.as`可能定义了一个IFrame对象,包含了初始化、加载URL、与JavaScript交互等功能。而`IFrameExternalCalls.as`可能包含了一系列与外部JavaScript进行交互的方法,如添加回调、触发事件等。 在实际应用中,...

    flex 和 js 交互

    1. **跨域策略文件**:由于Flash Player的安全限制,Flex应用在与JavaScript交互前需要加载一个跨域策略文件,允许它与不同源的JavaScript进行通信。这个文件通常命名为crossdomain.xml,放置在服务器的根目录下。 ...

    flex 与 flash 交互

    在Flex应用中,我们可以通过JavaScript与Flash内容交互,从而实现Flex和Flash之间的数据传递。 2. **事件监听**: 为了实现交互,我们需要在Flex和Flash之间设置事件监听器。例如,在Flash端,可以发布一个自定义...

Global site tag (gtag.js) - Google Analytics