AS3与JS交互是Web开发中常见的需求,尤其在Flash应用与网页融合的场景下，通过ExternalInterface类实现两者间的数据传递和功能调用，能够有效扩展Flash的功能边界，同时让网页JS能够控制Flash内容，本文将详细解析AS3与JS交互的原理、方法、注意事项及实际应用场景。
交互基础：ExternalInterface类
AS3中与JS交互的核心是flash.external.ExternalInterface类，它提供了两个核心方法：addCallback()和call()，前者用于将AS3函数暴露给JS，使JS能够调用AS3中的逻辑；后者用于AS3调用JS中的函数，实现Flash向网页传递数据或触发网页功能，在使用ExternalInterface前，需确保Flash Player的安全沙箱策略允许交互，即SWF文件需通过HTML中的allowScriptAccess属性设置访问权限（如allowScriptAccess="always"），且SWF与JS所在页面需同域，或通过跨域策略文件（crossdomain.xml）授权。
JS调用AS3函数：addCallback()方法
addCallback()方法用于将AS3中的公共函数注册为JS可调用的函数，其语法为：ExternalInterface.addCallback(functionName:String, closure:Function)。functionName是JS中调用的函数名，closure是AS3中定义的函数引用。
使用步骤：
- 定义AS3函数：需为public或static类型的函数，且参数和返回值需与JS兼容（如基本类型、String、Array等，不支持AS3特有类型如Date、Object的复杂结构）。
- 注册函数：通过
addCallback()将AS3函数暴露给JS。 - JS调用：在JS中通过Flash容器的DOM元素（如
document.getElementById("flashId")）调用注册的函数名。
示例代码：
AS3部分：
import flash.external.ExternalInterface;
public class FlashJSBridge {
public function FlashJSBridge() {
// 检查ExternalInterface是否可用
if (ExternalInterface.available) {
// 注册AS3函数"as3ToJS"，JS可通过此名调用
ExternalInterface.addCallback("as3ToJS", as3Function);
}
}
// AS3中定义的函数，供JS调用
public function as3Function(param:String):String {
trace("JS传入参数：" + param);
return "AS3返回：" + param.toUpperCase();
}
} JS部分：
// 获取Flash对象（假设Flash的id为"myFlash"）
var flashObj = document.getElementById("myFlash");
// 调用AS3注册的函数
var result = flashObj.as3ToJS("hello from JS");
console.log(result); // 输出："AS3返回：HELLO FROM JS" AS3调用JS函数：call()方法
call()方法用于AS3调用JS中的全局函数，语法为：ExternalInterface.call(functionName:String, ...args)。functionName是JS函数名，args是传递给JS函数的参数列表。
使用步骤：
- 定义JS函数：在JS中定义全局函数（或挂载到window对象上）。
- AS3调用：通过
call()方法传入JS函数名和参数。 - 处理返回值：JS函数的返回值会被AS3接收，需确保返回值类型兼容。
示例代码：
JS部分（在HTML中）：
// 定义全局函数，供AS3调用
function jsFunction(param) {
console.log("AS3传入参数：" + param);
return "JS返回：" + param.length;
} AS3部分：
import flash.external.ExternalInterface;
if (ExternalInterface.available) {
// 调用JS函数"jsFunction"，传入参数"AS3"
var result:String = ExternalInterface.call("jsFunction", "AS3");
trace(result); // 输出："JS返回：4"
} 交互方式对比与注意事项
为更清晰理解两种交互方式,可通过表格对比：
| 方法 | 作用 | 参数说明 | 返回值 | 注意事项 |
|---|---|---|---|---|
addCallback() | 将AS3函数暴露给JS调用 | functionName: JS调用的函数名；closure: AS3函数引用 | 无（注册成功后无返回值） | AS3函数需为public/static；JS调用时需确保Flash对象已完全加载（可监听onLoad事件） |
call() | AS3调用JS函数 | functionName: JS函数名；...args: 传递给JS的参数列表 | JS函数的返回值 | JS函数需为全局函数（或window对象属性）；参数和返回值需为JSON兼容类型 |
关键注意事项
安全策略：
allowScriptAccess需设置为"always"（跨域时）或"sameDomain"（同域时），否则无法交互。- 避免直接执行JS传入的动态代码（如
eval()），防止XSS攻击；若需动态调用，需对参数进行白名单验证。
兼容性处理：
- 部分旧版浏览器（如IE6-8）可能不支持ExternalInterface，需通过
ExternalInterface.available检测可用性。 - 调用顺序需确保Flash已初始化完成,可在Flash的
constructor或ADDED_TO_STAGE事件中注册函数。
- 部分旧版浏览器（如IE6-8）可能不支持ExternalInterface，需通过
数据类型限制：
AS3与JS交互时,复杂类型（如AS3的Object、Date）会被自动转换为JSON兼容格式，但需注意类型转换后的数据结构（如AS3的Array在JS中仍为数组，但AS3的Object在JS中可能失去原型链）。
实际应用场景
- Flash与网页数据同步：如Flash播放器播放状态变化时，通过
call()通知JS更新网页UI；JS获取用户输入后，通过addCallback()传递给Flash处理。 - Flash调用网页功能：如Flash中点击按钮后，通过
call()调用JS的window.open()打开新窗口，或调用JS的 analytics 函数上报数据。 - 跨域交互：若Flash与JS不同域，需在Flash服务器配置
crossdomain.xml，允许目标域访问（如<allow-access-from domain="*.example.com"/>）。
相关问答FAQs
Q1：AS3与JS交互时，如何处理跨域问题？
A：若Flash（SWF）与JS所在页面不同域，需满足两个条件：
- 在Flash服务器的根目录下放置
crossdomain.xml文件，明确允许目标域访问（例如目标域为https://js.example.com，则crossdomain.xml中需包含<allow-access-from domain="js.example.com"/>）； - HTML中
allowScriptAccess需设置为"always"（默认为"sameDomain"），若为本地调试，可通过Flash Player的安全设置（如flashplayerTrust目录）信任本地域。
Q2：为什么ExternalInterface.addCallback在Chrome中不生效？
A：可能原因及解决方案：
- Flash未完全加载：JS调用Flash函数时，Flash可能尚未初始化完成，需确保在Flash的
onLoad事件（如JS中监听document.getElementById("flashId").onload）后再调用，或在AS3的constructor中注册函数。 - CORS问题：若Flash与JS跨域且未配置
crossdomain.xml，Chrome会阻止交互，需检查服务器是否允许跨域访问，并确保crossdomain.xml可被正确读取（如文件权限正确）。 - Chrome安全策略：Chrome默认阻止非HTTPS页面加载HTTP Flash（或反之），需确保页面和Flash均为HTTPS（或均为HTTP）。通过以上方法，可实现AS3与JS的稳定交互，但需注意安全性和兼容性问题，尤其在复杂业务场景中，建议结合实际需求进行测试和优化。
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
发表回复