Vue框架下引⼊ActiveX控件的问题解决
最近参与了⼭东某⼀公司的呼叫中⼼系统的开发项⽬，我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能。从开始到结束所遇到的⼏个问题如下：
1.如何将ActiveX控件引⼊Vue，并且在页⾯上成功渲染；
2.如何调⽤ActiveX已提供的⽅法；
3.如何监听ActiveX的动作；
（注：以上问题在html的⽂件⾥不存在）
我们先来看下第⼀个问题：如何将ActiveX控件引⼊Vue，并且在页⾯上成功渲染。如何将ActiveX控件渲染到页⾯上。根据客户开发⼈员提供的demo，`<object id="" classid=""></object>`拷贝到vue⽂件中，如图所⽰
yarn run dev，运⾏成功，但是页⾯空出很⼤⼀块空⽩区域，很显然，没有渲染成功。经过查询，ActiveX控件只⽀持在IE浏览器下使⽤（有点坑）
这算是解决了第⼀个问题，同样，⼩伙伴可以通过动态⽣成的⽅式渲染到页⾯上，代码如下：
activex 控件let obj = ateElement('object')
obj.setAttribute('id', 'activex')
obj.setAttribute('classid', 'clsid:{控件id}')
obj.setAttribute('width', 1500)
obj.setAttribute('height', 100)
var _obj = ElementById("要渲染的节点");
_obj.appendChild(obj)
接下来我们来看第⼆个问题：如何调⽤ActiveX已提供的⽅法。
渲染是可以了，但是却⽆法调⽤控件提供的⽅法。根据demo：`softphonecontrol.MakeCall(paramsItem)`，⽆法执⾏，后来⼜采取嵌⼊iframe⽅式（还记得刚刚说的吗，这个控件在单纯的html页⾯没有任何问题，当然前提是IE浏览器）。最终到原因，IE的浏览器需要做下设置设置：设置-Internet选项-安全/⾃定义级别-Active控件和插件-对未标记为可安全执⾏脚本的ActiveX控件初始化并执⾏脚本，选择"启⽤"或者"提⽰"）
最后⼀个问题啦：如何监听ActiveX的动作。
根据demo：
<script for= "softphonecontrol" event= "OnLogRingUp(param1，param2)" language= "javascript">
alert("param1:"+param1+" "+"param2:"+param2);
</script>
再次提醒⼀下，这种写法也只有IE⽀持，⾕歌⽀持⼀些简单的load、onclick之类的⽅法，<script></script>中间的alert就是监听后续需要做的事情。我将这段代码直接拷贝到vue⽂件⾥：
哈哈，成功编译，但是⽆法监听到。换个思路，动态渲染到根节点呢，像上⾯提到的：
initRingUpSript:function(){
var ring = ateElement("script");
ring.setAttribute("for","softphonecontrol");
ring.event="OnLogRingUp(Call_ID,CORP_CODE)";
ring.ateTextNode("phoneListener.ringUp(Call_ID,CORP_CODE)"))
document.body.appendChild(ring)
},
值得注意的是：此⽅法会将<script>function</script>渲染到页⾯上，但是想执⾏Vue的methods的⽅法的话，还需要在mounted⾥加上⼀句代码： window.phoneListener = this;
这段代码的作⽤是将Vue的this所指向赋值给全局的变量phoneListener，这个变量，可随意。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论