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

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

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

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

3.如何监听ActiveX的动作；

（注：以上问题在html的文件里不存在）

我们先来看下第一个问题：如何将ActiveX控件引入Vue，并且在页面上成功渲染。如何将ActiveX控件渲染到页面上。根据客户开发人员提供的demo，`<object id="" classid=""></object>`拷贝到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：

<script  for= "softphonecontrol"  event= "OnLogRingUp(param1，param2)"  language= "javascript">
 alert("param1:"+param1+" "+"param2:"+param2);
</script>

再次提醒一下，这种写法也只有IE支持，谷歌支持一些简单的window.reload、onclick之类的方法，<script></script>中间的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)
   },

值得注意的是：此方法会将<script>function</script>渲染到页面上，但是想执行Vue的methods的方法的话，还需要在mounted里加上一句代码： window.phoneListener = this;

这段代码的作用是将Vue的this所指向赋值给全局的变量phoneListener，这个变量，可随意。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue动态控制input的disabled属性的方法

    Vue动态控制input的disabled属性的方法

    有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页

  • vue动态禁用控件绑定disable的例子

    场景 报修范围取值不同时 ,区域有时需要禁用 代码 <el-form-item label="报修范围" prop="applicationRange" > <el-select v-model="addInfo.applicationRange" placeholder="请选择报修范围" style="width: 200px" @change="inputToDisable

  • Vue input控件通过value绑定动态属性及修饰符的方法

    对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check

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

    最近参与了山东某一公司的呼叫中心系统的开发项目,我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能.从开始到结束所遇到的几个问题如下: 1.如何将ActiveX控件引入Vue,并且在页面上成功渲染: 2.如何调用ActiveX已提供的方法: 3.如何监听ActiveX的动作: (注:以上问题在html的文件里不存在) 我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染.如何将ActiveX控件渲染到页面上.根据客户开发人员提供的demo,`<objec

  • 详解Vue.js和layui日期控件冲突问题解决办法

    事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据. 下面是html+vuejs+layui lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的. 对于

  • 使用VS2010 C#开发ActiveX控件(下),完整代码打包下载

    使用VS2010 C#开发ActiveX控件(下),完整代码打包下载

    其实如果我们不进行设置,只是修改了代码,运行程序以后,其出错界面如下图1所示: 图1 抛出异常如下: ************** Exception Text ************** System.MethodAccessException: Attempt by security transparent method 'Rare.Card.Libary.Controls. ReadCardControl.btnRead_Click(System.Object, System.Event

  • VUE饿了么树形控件添加增删改功能的示例代码

    VUE饿了么树形控件添加增删改功能的示例代码

    本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

  • 可输入文字查找ajax下拉框控件 ComBox的实现方法

    GooFunc.js文件 //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) { t += dom.offsetTop; l += dom.offsetLeft; dom=dom.offsetParent; }; return { top: t, lef

  • js之ActiveX控件使用说明 new ActiveXObject()

    什么是 ActiveX 控件? ActiveX 控件广泛用于 Internet.它们可以通过提供视频.动画内容等来增加浏览的乐趣.不过,这些程序可能出问题或者向您提供不需要的内容.在某些情况下,这些程序可被用来以您不允许的方式从计算机收集信息.破坏您的计算机上的数据.在未经您同意的情况下在您的计算机上安装软件或者允许他人远程控制您的计算机.考虑到这些风险,您应该在完全信任发行商的情况下才安装这些程序. 当 Windows 阻止 ActiveX 控件的安装时,您应该做什么? 您可能不应该安装该 A

  • EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法

    问题 在本人目前的项目中,前端部分完全使用EXTJS基于"One-Page"理念搭建.除了一个HTML作为基本容器外,就全是JS文件了(页面是由JS文件实现的).当用户切换页面时候,我们通过析构上一个页面对象,然后创建新页面对象并展现在HTML中.基于这种架构,我们还引入了一个ActiveX控件,用于展现报表.这一引入,问题就出来了:只要是访问有报表控件存在的页面,用户切换2次页面,IE就会崩溃(FF无此问题),百试不爽. 原因 因为系统设计时考虑到了资源释放,专门处理过析构部分,而且

  • 激活 ActiveX 控件

    激活 ActiveX 控件

    激活 ActiveX 控件 发布日期: 2006-3-29 | 更新日期: 2006-3-29 Internet 开发索引 用户不能与 APPLET.EMBED 或 OBJECT 元素加载的 Microsoft ActiveX 控件直接交互.用户激活这些控件的用户界面后才可以与这些控件交互.本文介绍 Microsoft Internet Explorer 如何处理 ActiveX 控件,显示如何加载 ActiveX 控件才能激活它们的界面,还描述这种行为对辅助工具和宿主 WebBrowser 控

  • Android实现支持所有View的通用的下拉刷新控件

    Android实现支持所有View的通用的下拉刷新控件

    下拉刷新对于一个app来说是必不可少的一个功能,在早期大多数使用的是chrisbanes的PullToRefresh,或是修改自该框架的其他库.而到现在已经有了更多的选择,github上还是有很多体验不错的下拉刷新. 而下拉刷新主要有两种实现方式: 1. 在ListView中添加header和footer,监听ListView的滑动事件,动态设置header/footer的高度,但是这种方式只适用于ListView,RecyclerView. 2. 第二种方式则是继承ViewGroup或其子类,

  • 利用ActiveX控件InetCtls.Inet在ASP中实现新闻小偷

    这几天维护网站的时候要加很多的新闻或者其它文章,因为经常到一个网站上找文章,所以就想,能不能做个程序,指定一个网址,让ASP去搜索这个网址上所有的文章,进而把搜索回来的文章进行分析,把文章内容保存到数据库里,这样不就可以省去很多麻烦了吗? 后来才知道,这个想法早就有人想过,也有人做过新闻小偷,呵呵,不过据说是php的,我没见过,呵呵,反正报着一种开发的心态开始进行工作-- 我记得以前收集的有一篇文章介绍的有如何用ASP获取别人的网页,拿出来一看,嗨,没几句代码: URL = http://new

随机推荐