js与flash交互

Posted 2020-11-06 你过来啊

一.背景

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

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

二.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字符串），来进行回调交互。

三.坑

    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授权弹框默认为拒绝）