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 相关文章推荐
javascript 必知必会之closure
Sep 21 Javascript
js变量以及其作用域详解
Jul 18 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
移动端界面的适配
2017/01/11 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
VUE重点问题总结
2018/03/19 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python批量爬取下载抖音视频
2019/06/17 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
战友聚会邀请函
2014/01/18 职场文书
项目总经理岗位职责
2014/02/14 职场文书
战略合作意向书
2014/07/29 职场文书
教师群众路线心得体会
2014/11/04 职场文书
财产保全担保书
2015/01/20 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书