Flex Javascript交互实现代码

关键字：ExternalInterface
所用类库：SWFObject
/**
* Flex调用Javascript函数
* @params functionName:String Javascript函数名称
* @params ...params Javascript函数参数
* @return 返回Javascript函数的return内容
**/
ExternalInterface.call(functionName:String, ...params);
main.mxml


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* 调用Java script 函数
* @params evt:MouseEvent
* @return void
**/
private function myClick(evt:MouseEvent):void {
var item:Object = new Object();
item.name = "Dante";
item.address = "Beijing";

var results:Object = ExternalInterface.call("myfunc",item);
//results为myfunc函数返回的对象
trace(ObjectUtil.toString(results));
}
]]-->
</mx:Script>

<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>

index.html


代码如下:

/**
*　被Flex调用的 myfunc函数
* @params item 对象
* @return results　返回一个对象给Flex
**/
function myfunc(item) {
alert(item.name+"--"+item.address);

//创建对象
var results = {};
results .name= "dante";
results .age = 23;
results .sex = "man";
return obj;
}

/**
* Javascript调用Flex函数
* @params functionName:String Javascript调用Flex函数名
* @params closure:Function Flex将要调用的函数
* @return void
**/
ExternalInterface.addCallback(functionName:String,closure:Function);
main.mxml


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" initialize="initApp()">
<mx:Script>
    <!--[CDATA[
         import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* initApp
* @return void
**/
private function initApp():void {
//注册列表
ExternalInterface.addCallback("saveD",saveData);

//HTML　与　FLEX交互
//params.flashvars = "xmlPath=hello&name=dante";
var item:Object = Application.application.parameters;
trace("xmlPath:"+item.xmlPath ,"name:" + item.name);
}
/**
* saveData
* @params item:Object java script 传过来的参数
* @return void
**/
private function saveData(item:Object):void {
trace("javascript调用Flex函数成功!");
nameTxt.text = item.name;
}
    ]]-->
</mx:Script>
<mx:TextInput id="nameTxt"/>
</mx:Application>

index.html

HTML内嵌swf文件，我用的SWFObject，个人认为是一个很好的类库，简化了包含代码。
注意 ：javascript调用Flex的函数，必须要获得swf的ID，可以通过document.getElementById(),也可以使用swfobject.getObjectById()。


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/swfobject.js" src="js/swfobject.js" type="text/javascript"></script>
<title>SWFObject</title>
<script type="text/javascript" language="javascript"><!--
var flashvars = false;
var params = {};
params.flashvars = "xmlPath=hello&name=dante";
var attributes = {};
//ID,也就是swf的ID，这个ID很重要，通过它调用flex的方法
attributes.id = "swf01";
　
//内嵌swf文件，这个embedSWF方法，我在最后的补充会说下
swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes);
/**
*　调用Flex函数
* @return void
**/
function callFlex(item) {
//通过ID获得swf，也可以使用document.getElementById();
//var swf = document.getElementById("swf01");
var swf = swfobject.getObjectById("swf01");
var item = {};
item.name = document.getElementById("nameTxt").value;
//调用Flex函数，传参item:Object
swf.saveD(item);
}
// --></script>
</head>
<body>
<center>
<div id="myPanel">Flex content</div>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="nameTxt"/></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:callFlex();" href="javascript:callFlex();">Call Flex</a>
</td>
</tr>
</table>
</center>
</body>
</html>

OK,两种交互的方式已经告诉大家了，快试试吧。
SWFObject使用补充：
swfobject.embedSWF()
swfobject.getObjectById("swfID")
swfobject.removeSWF("swfID")
一.swfobject.embedSWF：
内嵌swf文件，这个函数的参数比较多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes)，各个参数具体功能如下：
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。
flashvars（String，可选的）用name:value对指定你的flashvars。
params（String，可选的）用name:value对指定你的嵌套object元素的params。
attributes（String，可选的）用name:value对指定object的属性。
注意 ：在不破坏参数顺序的情况下，你可以忽略可选参数。如果你不想使用一个可选参数，但是会使用后面的一个可选参数，你可以简单的传入false作为参数的值。对flashvars、params和 attributes这些JavaScript对象来说，你也可以相应的传入一个空对象{}。
二.swfobject.getObjectById("swfId")
通过swfid获得swf对象，通过该对象可调用flex函数。
三.swfobject.removeSWF("swfId")
通过swfId删除swf。
注意 ：删除swf这里需要提醒下，因为embedSWF是替换标签，而不是填充。比如上面的例子<div id="myPanel">Flex content</div>，如果执行了swfobject.removeSWF后，想重新添加SWF必须要重新创建<div id="myPanel">或者更改embedSWF的第二个参数更改替换新的标签ID。因为在这里SWF替换了调了<div>

赞 (0)

相关推荐

  • android中webview控件和javascript交互实例

    当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释: 复制代码 代码如下: A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit

  • pyv8学习python和javascript变量进行交互

    python取得javascript里面的值 复制代码 代码如下: import PyV8 with PyV8.JSContext() as env1:    env1.eval("""                var_i = 1;                var_f = 1.0;                var_s = "test";                var_b = true;            ""

  • Almp 安卓系统上搭建本地php服务器环境的步骤

    Almp 安卓系统上搭建本地php服务器环境的步骤

    在网上找到安卓系统的PHP+MySQL环境,甚是喜欢,拿来修改.试用了一番.已经实现在安卓手机上搭建Web服务端,并且支持WordPress.Discuz.Phpmyadmin的运行.目前正在考虑,利用手机可以建立WiFi热点这个特性,随时随地宣传网站:比如在机场.图书馆.教学楼.火车站等人口密集处,建立无密码的WiFi热点和Almp,然后等鱼上钩. 先来看看我的折腾成果: 1.先来一张PHP探针:基本都是手机的信息,这里要提醒一下,如果手机运行内存不足512MB,运行这东西还是非常吃力的 2.

  • php后台程序与Javascript的两种交互方式

    方法一:通过Cookie交互. 一共是三个文件,分别为:index.htm,action.php,main.htm 原理为前台页面main.htm和后台action.php通过页面框架 index.htm组织起来,将action.php的页面宽度设为0,这样并不影响显示.action.php将信息放入cookie中,main.htm通过读取 cookie来实现交互.在main.htm中也可以通过重新读取action.php 来实现控制后台CGI程序. index.htm 复制代码 代码如下: <

  • php结合安卓客户端实现查询交互实例

    PHP 服务器端: function getids() { $this->output->set_header('Content-Type: application/json; charset=utf-8'); $jsonstr = ''; $pname = $pcallid = $pworkid = ''; if (isset($_GET['name'])) { $pname = $_GET['name']; } if (isset($_GET['callid'])) { $pcallid

  • 关于JavaScript与HTML的交互事件

    关于JavaScript与HTML的交互事件

    JavaScript和HTML的交互是通过事件实现的.JavaScript采用异步事件驱动编程模型,当文档.浏览器.元素或与之相关对象发生特定事情时,浏览器会产生事件.如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄. 事件流 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是外层先触发?目前主要有三种模型 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元

  • Flex Javascript交互实现代码

    关键字:ExternalInterface 所用类库:SWFObject /** * Flex调用Javascript函数 * @params functionName:String Javascript函数名称 * @params ...params Javascript函数参数 * @return 返回Javascript函数的return内容 **/ ExternalInterface.call(functionName:String, ...params); main.mxml 复制代码

  • Flex 和JavaScript 交互（带参）

    Flex文件: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="150" creationComplete="init

  • Actionscript与javascript交互实例程序(修改)

    Actionscript与javascript交互实例程序(修改)

    mxml页面: <?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" width=&

  • Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

    本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

  • Android总结之WebView与Javascript交互（互相调用）

    Android总结之WebView与Javascript交互（互相调用）

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用.本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之Web

  • QT与javascript交互数据的实现

    一.数据从QT流向JS 1.QT调用JS的函数,JS通过形参获得QT的值 2.JS调用QT的函数,QT函数的返回值进入JS 二.数据从JS流向QT 1.JS调用QT的函数,QT通过形参获得JS的值 2.QT调用JS的函数,JS函数的返回值进入QT 1.QT向JS传递数组 基本类型可以直接传递,例如 int bool string double等 qt向js传递数组,需要把数组转成QJsonArray,再把QJsonArray转成QString, 这样js就会接收到一个基本类型string,而这个

  • 微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)

    微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)

    目录 1.goods.wxml代码 2.goods.wxss代码 3.goods.js代码 4.时间转化js代码 完整功能和页面 1.goods.wxml代码 <!--商品详情页--> <view class="container"> <scroll-view class="main" scroll-y="true"> <!--顶部轮播图--> <swiper autoplay="t

  • JavaScript正则表达式验证代码(推荐)

    RegExp:是正则表达式(regular expression)的简写. 正则表达式描述了字符的模式对象.可以使用正则表达式来描述要检索的内容. 简单的模式可以是一个单独的字符.更复杂的模式包括了更多的字符,并可用于解析.格式检查.替换等等. //判断输入内容是否为空 function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.length==0){ alert('对不起,文本框不能为空或者为

  • 基于HTML模板和JSON数据的JavaScript交互(移动端)

    写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 + 连接符连接多个html内容: var html = ''; html += '<div class="empty-list">' + '<div class="icon icon-box"></div>'+ '<div>还没有订单</div>'+ '</div>';

  • 超实用的JavaScript表单代码段

    整理了下比较实用的Javascript表单代码段,分享给大家供大家参考,具体内容如下 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onload执行一个方法.下面代码段,可以保证多个方法在Onload时执行: function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ wind

随机推荐