快捷導(dǎo)航

Vue框架下引入ActiveX控件的問(wèn)題解決

更新時(shí)間：2019年03月25日 14:51:34 作者：Heaven

這篇文章主要介紹了Vue框架下引入ActiveX控件的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近參與了山東某一公司的呼叫中心系統(tǒng)的開(kāi)發(fā)項(xiàng)目，我負(fù)責(zé)的模塊是在公司已有的前端Vue框架下集成他們的軟電話條功能。從開(kāi)始到結(jié)束所遇到的幾個(gè)問(wèn)題如下：

1.如何將ActiveX控件引入Vue，并且在頁(yè)面上成功渲染；

2.如何調(diào)用ActiveX已提供的方法；

3.如何監(jiān)聽(tīng)ActiveX的動(dòng)作；

（注：以上問(wèn)題在html的文件里不存在）

我們先來(lái)看下第一個(gè)問(wèn)題：如何將ActiveX控件引入Vue，并且在頁(yè)面上成功渲染。如何將ActiveX控件渲染到頁(yè)面上。根據(jù)客戶(hù)開(kāi)發(fā)人員提供的demo，`<object id="" classid=""></object>`拷貝到vue文件中，如圖所示

yarn run dev，運(yùn)行成功，但是頁(yè)面空出很大一塊空白區(qū)域，很顯然，沒(méi)有渲染成功。經(jīng)過(guò)查詢(xún)，ActiveX控件只支持在IE瀏覽器下使用（有點(diǎn)坑）

這算是解決了第一個(gè)問(wèn)題，同樣，小伙伴可以通過(guò)動(dòng)態(tài)生成的方式渲染到頁(yè)面上，代碼如下：

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("要渲染的節(jié)點(diǎn)");
_obj.appendChild(obj)

接下來(lái)我們來(lái)看第二個(gè)問(wèn)題：如何調(diào)用ActiveX已提供的方法。

渲染是可以了，但是卻無(wú)法調(diào)用控件提供的方法。根據(jù)demo：`softphonecontrol.MakeCall(paramsItem)`，無(wú)法執(zhí)行，后來(lái)又采取嵌入iframe方式（還記得剛剛說(shuō)的嗎，這個(gè)控件在單純的html頁(yè)面沒(méi)有任何問(wèn)題，當(dāng)然前提是IE瀏覽器）。最終找到原因，IE的瀏覽器需要做下設(shè)置設(shè)置：設(shè)置-Internet選項(xiàng)-安全/自定義級(jí)別-Active控件和插件-對(duì)未標(biāo)記為可安全執(zhí)行腳本的ActiveX控件初始化并執(zhí)行腳本，選擇"啟用"或者"提示"）

最后一個(gè)問(wèn)題啦：如何監(jiān)聽(tīng)ActiveX的動(dòng)作。

根據(jù)demo：

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

再次提醒一下，這種寫(xiě)法也只有IE支持，谷歌支持一些簡(jiǎn)單的window.reload、onclick之類(lèi)的方法，<script></script>中間的alert就是監(jiān)聽(tīng)后續(xù)需要做的事情。我將這段代碼直接拷貝到vue文件里：

哈哈，成功編譯，但是無(wú)法監(jiān)聽(tīng)到。換個(gè)思路，動(dòng)態(tài)渲染到根節(jié)點(diǎn)呢，像上面提到的：

 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)
   },

值得注意的是：此方法會(huì)將<script>function</script>渲染到頁(yè)面上，但是想執(zhí)行Vue的methods的方法的話，還需要在mounted里加上一句代碼： window.phoneListener = this;

這段代碼的作用是將Vue的this所指向賦值給全局的變量phoneListener，這個(gè)變量，可隨意。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: