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


Posted in Javascript onSeptember 22, 2016

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="100%" height="100%" xmlns:code="http://code.google.com/p/flex-iframe/" 
creationComplete="initApp()"> 
<fx:Declarations> 
<!-- 将非可视元素(例如服务、值对象)放在此处 --> 
</fx:Declarations> 
<fx:Script> 
<![CDATA[ 
import flash.external.*; //引入ExternalInterface 
public function initApp():void 
{ 
ExternalInterface.addCallback("myJsFunction",myAsFuncn); 
button.addEventListener(MouseEvent.CLICK,buttonClick); 
} 
public function myAsFuncn(js:String):String 
{ 
return "js:"+js+"访问了as:"+asInput.text; 
} 
private function buttonClick(event:MouseEvent):void 
{ 
trace(asInput.text); 
label.text = "as 调用 js ..."; 
var result:String = callJS(asInput.text); 
label.text = "返回值:" + result; 
} 
private function callJS(arg:String):String 
{ 
return ExternalInterface.call("jsMethod",arg); 
} 
private function asMethod(arg:String):String 
{ 
label.text = arg; 
return "js 调用了 as 成功!"; 
} 
]]> 
</fx:Script> 
<s:VGroup width="100%" height="100%"> 
<s:VGroup width="100%"> 
<mx:Button x="169.5" y="162" label="点击" fontSize="14" id="button"/> 
<mx:TextInput id="asInput" x="122" y="76"/> 
<s:Label id="label"/> 
</s:VGroup> 
</s:VGroup> 
<code:IFrame source="MyHtml.html" width="500" height="500"/> 
</s:Application>

html页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>MyHtml.html</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script language="JavaScript"> 
function callAs( ) 
{ 
var myFlexfun=document.getElementById("myFlexFun"); 
var result=myFlexfun.myJsFunction(jsinput.value); 
alert(result); 
mess.value=result; 
} 
function jsMethod(arg) { 
alert("as 调用 js 成功,参数为:" + arg); 
return ("as 调用 js 成功!"); 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<object id= "myFlexFun" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="300"> 
<param name="movie" value="test.swf" /> 
<param name="quality" value="high" /> 
<embed src="test.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed> 
</object> 
</td> 
</tr> 
<tr> 
<td> 
<input type="input" id="jsinput"/> 
<input type="button" value="点我看效果" onclick="callAs()"/> 
<input type="input" id="mess"/> 
</td> 
</tr> 
</table> 
</body> 
</html>

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

如果试过以上的方法,会发现在被嵌入的Html见面中又嵌入了一个父级的swf文件,如下

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="100%" height="100%" xmlns:code="http://code.google.com/p/flex-iframe/" 
creationComplete="initApp()"> 
<fx:Declarations> 
<!-- 将非可视元素(例如服务、值对象)放在此处 --> 
</fx:Declarations> 
<fx:Script> 
<![CDATA[ 
import flash.external.*; 
import mx.controls.Alert; 
import mx.rpc.events.ResultEvent; //引入ExternalInterface 
public function initApp():void 
{ 
ExternalInterface.addCallback("sayCallBack",callBack); 
} 
public function callBack(str:String):String{ 
return "Hello "+str; 
} 
protected function button1_clickHandler(event:MouseEvent):void 
{ 
ExternalInterface.call('sayHelloWorld',' Jim'); 
var array:Array = new Array(); 
array.push("a", "b","c","d","e"); 
myIFrame.callIFrameFunction('jsMethod',array,function(str:String):void{ 
label.text=str; 
}); 
} 
public static function str():String{ 
return "aaa"; 
} 
]]> 
</fx:Script> 
<s:VGroup width="100%" height="100%"> 
<s:BorderContainer width="100%" height="300" backgroundColor="#00ffaa"> 
<s:HGroup width="100%"> 
<s:Button label="调用js" click="button1_clickHandler(event)"/> 
<mx:Button x="169.5" y="162" label="点击" fontSize="14" id="button"/> 
<mx:TextInput id="asInput" x="122" y="76"/> 
<s:Label id="label"/> 
</s:HGroup> 
</s:BorderContainer> 
<s:BorderContainer width="100%" height="300"> 
<code:IFrame id="myIFrame" source="com/MyHtml.html" width="100%" height="100%"/> 
</s:BorderContainer> 
</s:VGroup> 
</s:Application>

html页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>MyHtml.html</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<script language="JavaScript"> 
function callAs( ) 
{ 
var ifrm =window.parent.xiSwfUrlStr; 
if (ifrm) 
{ 
alert(ifrm); 
}else{ 
alert('false'); 
} 
} 
function jsMethod(arr) { 
alert("as 调用 js 成功,参数为:"+arr[4]); 
return ("as 调用 js 成功!"); 
} 
function callA(){ 
var str=window.parent.document.getElementById("test").sayCallBack("Bill"); 
if (str) 
{ 
alert(str); 
mess.value=str; 
}else{ 
alert('false'); 
} 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td > 
<object id= "myFlexFun" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"> 
<param name="movie" value="../test.swf" /> 
<param name="quality" value="high" /> 
</object> 
</td> 
</tr> 
<tr> 
<td> 
<input type="input" id="jsinput"/> 
<input type="button" value="点我看效果" onclick="callA()"/> 
<input type="input" id="mess"/> 
</td> 
</tr> 
</table> 
</body> 
</html>

这样,html的js脚本就可以直接调用as脚本,而不需要再次嵌入swf文件。

以上所述是小编给大家介绍的Actionscript与javascript交互实例程序(修改),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
BootStrap的双日历时间控件使用
Jul 25 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
详细分析vue响应式原理
Jun 22 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 #Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 #Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 #Javascript
自制微信公众号一键排版工具
Sep 22 #Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 #Javascript
详解Node.js中的事件机制
Sep 22 #Javascript
AngularJS通过$sce输出html的方法
Sep 22 #Javascript
You might like
php 常用字符串函数总结
2008/03/15 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python实现nao机器人手臂动作控制
2019/04/29 Python
pandas中的series数据类型详解
2019/07/06 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
银行实习自我鉴定
2013/10/12 职场文书
《狼》教学反思
2014/03/02 职场文书
销售会计岗位职责
2014/03/15 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
员工开除通知书
2015/04/25 职场文书
现货白银电话营销话术
2015/05/29 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis