如何在Vue中引入ActiveX控件
本篇文章为大家展示了如何在Vue中引入ActiveX控件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联公司专注于定襄企业网站建设,成都响应式网站建设公司,商城系统网站开发。定襄网站建设公司,为定襄等地区提供建站服务。全流程按需开发,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
1.如何将ActiveX控件引入Vue,并且在页面上成功渲染;
2.如何调用ActiveX已提供的方法;
3.如何监听ActiveX的动作;
(注:以上问题在html的文件里不存在)
我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染。如何将ActiveX控件渲染到页面上。根据客户开发人员提供的demo,``拷贝到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:
再次提醒一下,这种写法也只有IE支持,谷歌支持一些简单的window.reload、onclick之类的方法,中间的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) },
值得注意的是:此方法会将渲染到页面上,但是想执行Vue的methods的方法的话,还需要在mounted里加上一句代码: window.phoneListener = this;
上述内容就是如何在Vue中引入ActiveX控件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
新闻标题:如何在Vue中引入ActiveX控件
浏览地址:http://scyanting.com/article/ggssip.html