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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
浅谈JS的原型和原型链
Jun 04 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
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python简明入门教程
2015/08/04 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
python怎么判断模块安装完成
2020/06/19 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
建议书格式
2015/02/04 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers