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


Posted in Javascript onMarch 25, 2019

最近参与了山东某一公司的呼叫中心系统的开发项目,我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能。从开始到结束所遇到的几个问题如下:

1.如何将ActiveX控件引入Vue,并且在页面上成功渲染;

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

3.如何监听ActiveX的动作;

(注:以上问题在html的文件里不存在)

我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染。如何将ActiveX控件渲染到页面上。根据客户开发人员提供的demo,`<object id="" classid=""></object>`拷贝到vue文件中,如图所示

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

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文件里:

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

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

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,这个变量,可随意。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
小程序新版订阅消息模板消息
Dec 31 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
详解原生JS回到顶部
Mar 25 #Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
详解javascript函数写法大全
Mar 25 #Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
jquery实现图片放大点击切换
2017/06/06 jQuery
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue实现简单跑马灯效果
2020/05/25 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
python:动态路由的Flask程序代码
2019/11/22 Python
通过实例学习Python Excel操作
2020/01/06 Python
python实现人工蜂群算法
2020/09/18 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
毕业生护理专业个人求职信范文
2014/01/04 职场文书
个人求职信范例
2014/01/29 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
经验交流材料格式
2014/12/30 职场文书
给老婆道歉的话
2015/01/20 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
解决redis批量删除key值的问题
2022/03/23 Redis