最近參與了山東某一公司的呼叫中心系統的開發項目，我負責的模塊是在公司已有的前端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，這個變量，可隨意。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。