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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
3分钟学会一个Python小技巧
2018/11/23 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
浅析python 字典嵌套
2020/09/29 Python
贷款委托书怎么写
2014/08/02 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
小学运动会报道稿
2014/10/04 职场文书
运动会广播稿100字
2015/08/19 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL