Vue框架下引入ActiveX控件的问题解决_vue引入activex - CSDN文库

1星 114 浏览量更新于2023-03-03 评论 1 收藏 58KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了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浏览

器下使用（有点坑）

这算是解决了第一个问题，同样，小伙伴可以通过动态生成的方式渲染到页面上，代码如下：

let obj = document.createElement('object')

obj.setAttribute('id', 'activex')

obj.setAttribute('classid', 'clsid:{控件id}')

obj.setAttribute('width', 1500)

obj.setAttribute('height', 100)

var _obj = document.getElementById("要渲染的节点");

_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支持，谷歌支持一些简单的window.reload、onclick之类的方法，<script></script>中间的

alert就是监听后续需要做的事情。我将这段代码直接拷贝到vue文件里：

哈哈，成功编译，但是无法监听到。换个思路，动态渲染到根节点呢，像上面提到的：

initRingUpSript:function(){

var ring = document.createElement("script");

ring.setAttribute("for","softphonecontrol");

ring.event="OnLogRingUp(Call_ID,CORP_CODE)";

ring.appendChild(document.createTextNode("phoneListener.ringUp(Call_ID,CORP_CODE)"))

document.body.appendChild(ring)

},

值得注意的是：此方法会将<script>function</script>渲染到页面上，但是想执行Vue的methods的方法的话，还需要在

mounted里加上一句代码： window.phoneListener = this;

这段代码的作用是将Vue的this所指向赋值给全局的变量phoneListener，这个变量，可随意。

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论1

Cole-小助教

2021-03-22

这是抄网上的内容转成PDF骗分啊，大家不要下载

weixin_38526823

粉丝: 5
资源: 946

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈