解决在Vue框架下引入ActiveX控件的问题

最近参加了山东某公司的一个呼叫中心系统的开发项目。我负责的模块是在公司现有的前端Vue框架下整合他们的软电话功能。从头到尾遇到的几个问题如下：

1.如何将ActiveX控件引入Vue并在页面上成功呈现；

2.如何调用ActiveX提供的方法；

3.如何监控ActiveX的动作；

(注意：以上问题在html文件中不存在)

我们先来看第一个问题：如何将ActiveX控件引入Vue并在页面上成功渲染。如何向页面呈现ActiveX控件。根据客户开发人员提供的演示，对象id=/object被复制到vue文件，如图所示

纱线运行dev，它成功运行了，但是页面上留下了很大的空白区域，很明显，它没有成功渲染。查询后，ActiveX控件只能在IE浏览器下使用(有一些漏洞)

这可以算是解决了第一个问题。类似地，小伙伴可以通过动态生成呈现给页面。代码如下：

let obj=document . create element(' object ')obj . set attribute(' id '，' ActiveX ')obj . set attribute(' classic '，' clsid 3360 { control id } ')obj . set attribute(' width '，1500) obj.setattribute ('height '，100)var _ obj=document . getelementbyid('要呈现的节点')；_obj.appendChild(obj)接下来，我们来看第二个问题：如何调用ActiveX提供的方法。

呈现是可以的，但是不能调用控件提供的方法。根据演示：` softphonecontrol。makecall (paramitem)`，不能执行，然后内嵌iframe(记得我刚才说的，这个控件在一个简单的html页面上没有问题，当然前提是IE浏览器)。查明原因后，IE浏览器需要进行如下设置：设置-互联网选项-安全/自定义级别-活动控件和插件-未标记为安全的ActiveX控件初始化并执行脚本执行脚本，选择“启用”或“提示”)

最后一个问题：如何监控ActiveX的动作。

根据演示：

='softphonecontrol '事件的脚本='OnLogRingUp(param1，param2)'语言=' JavaScript ' alert(' param 1: ' param 1 ' ' ' param 2: ' param 2)；/script再次提醒我，这种编写方法只有IE支持，Google支持window.reload、onclick等一些简单的方法。脚本/脚本中的警报是为了监视以后需要做什么。我将这段代码直接复制到了vue文件中：

哈哈，编译成功，但是无法监控。要改变思维方式，动态渲染到根节点，如上所述：

initringupscript : function(){ var ring=document . createelement(' script ')；ring.setAttribute('for '，' softphonecontrolring . event=' onLogRingup(Call _ ID，CORP _ CODE)'；ring . appendchild(document . createtextnode(' phone listener . ring up(Call _ ID，CORP _ CODE)'))document . body . appendchild(ring)}，值得注意的是这个方法会将scriptfunction/script渲染到页面上，但是如果要执行Vue的方法的方法，需要在mounted:window . phone listener=this中添加一个代码；

这段代码的功能是将Vue的这个点分配给全局变量phoneListener，这个变量是可选的。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。