1.背景

    近期项目中遇到了js和flash交互相关工作内容,在此记录一下通过这次开发了解到的js和flash交互基本操作及一些坑。

    flash是一种浏览器的插件,使用AS编写。它的引入方式和其它资源类似,都是在html标签里指定其存放地址。

2.js与flash的交互

    js与flash交互涉及两个方面:js调flash的接口;flash调js的接口。

    js调flash接口很简单,只需要创建一个object标签,然后在这个标签里写入flash的url。当这个object标签加载好,就可以调用了,调用的形式形如 swfElement.someAPI()。其中swfElement是这个标签对应的DOM,someAPI是flash提供的接口。举例如下:

<object id="flashDemo" type="application/x-shockwave-flash" data="http://127.0.0.1:8081/flashDemo.swf">
    <param name="movie" value="http://127.0.0.1:8081/flashDemo.swf">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="opaque">
    </object>



    flash调js则需要在window下挂上一个约定好的对象,然后js把调用方法放到其中,然后flash通过调用这些方法(可以传参数,注意参数应为JSON字符串),来进行回调交互。

3.坑

    flash的object元素如果没有显示出来,是没法调用其接口的;

    当我们调用设备时,会弹出一个默认的授权框,而且是每个flash实例(一个object)调用设备时,都会弹出一次。

    需要用户手动确认的这个弹框,如果你挡住其中一部分,则上面所有按钮都无法点击,这可能是为了防止前端强制用户选择。

    如果你在点击关闭的同时,隐藏object,会导致报错。

    chorme的object无法监听到click事件,只能监听到mouseup事件,firefox的object无法监听到mouseup事件,只能监听到click事件

    flash调用本地设备时,尽量保持flash显示且样式不变。在一些浏览器(QQ,360)的兼容模式下,如果在flash调用本地设备时,将其移位隐藏(left: -2000),则可能会导致flash崩溃,进而整个网页崩溃。

    chrome禁用flash后,指向flash官网的链接的a标签会被屏蔽掉。

    因为在每次重新进入网页时,默认是禁止flash的本地设备权限的,所以当flash调用授权弹框后,弹框的默认选项应该为允许,可是当你允许之后再刷新,默认就为允许了,而此时flash并未获得设备权限,导致状态和显示不一致的问题。解决方案是,在弹框的flash加入到DOM之前,先在DOM里塞一个临时的flash的Object,这个临时的Object只要是flash就行没有其他要求,这样就可以保证每次重新进入授权弹框默认都为拒绝了。(不知道浏览器的这个特性的原因,而且,即使你不在弹框flash的Object引入之前先引入一个临时的flash的Object,而在浏览器的其它标签页有flash的Object存在,也可以使当前页面的flash授权弹框默认为拒绝)