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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
整理一下常见的IE错误
Nov 18 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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
php变量作用域的深入解析
2013/06/03 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python正则表达式的使用
2017/06/12 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
详细分析Python垃圾回收机制
2020/07/01 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
预备党员政审材料
2014/02/04 职场文书
物流专员岗位职责
2014/02/17 职场文书
感恩节活动策划方案
2014/05/16 职场文书
敬老模范事迹
2014/05/21 职场文书
生产车间标语
2014/06/11 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
导游欢迎词范文
2015/01/23 职场文书
电影红河谷观后感
2015/06/11 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android