JavaScript 操作 COM 控件

目标：用JavaScript 腳本代碼調用COM控件，實作基本功能操作：

1.定義及初始化COM控件；

2.調用COM接口；

3.注冊COM事件并實作事件調用。

1. 定義及初始化COM控件 

     在HTML頁面定義一個object标簽來加載COM控件：

1） classid：是COM控件的編号，用來唯一識别一個COM控件；

2） id：是JavaScript調用COM控件時通路的對象，它是全局對象，此處将全局對象命名為ocx；

3） codebase：是打包COM的cab包資源路徑。可以在後面加上#version=1,0,0,1來釋出cab實作自動更新下載下傳。

Js代碼 1.<object classid="clsid:D4CCE975-3B00-417A-A520-B265FBFEB178" id="ocx" codebase="CarPlayCtrl.cab" standby="控件加載中..."></object> 

<object classid="clsid:D4CCE975-3B00-417A-A520-B265FBFEB178" id="ocx" codebase="CarPlayCtrl.cab" standby="控件加載中..."></object> [使用者還可以定義其它相關屬性] 

複制代碼用浏覽器（IE核心）打開頁面後就可以加載COM控件。

2. 調用COM按口和屬性 

2.1 調用方法 

     在建立COM标簽時定義了一個全局對象ocx。是以之後在JavaScript代碼中調用控件接口顯示非常容易，類似後Java中表态通路的調用，如調用建立播放器方法：

COM接口：

Js代碼 1.LONG CreatePlayer(LONG flag,ULONG decTag, BSTR streamerName， LONG playerIndex) 

LONG CreatePlayer(LONG flag,ULONG decTag, BSTR streamerName， LONG playerIndex) 

複制代碼Javascript調用COM接口：

Js代碼 1.var rtn = ocx.CreatePlayer(0, ”decTag”, ”guanhuistreamer”, -1);  

2.if(rtn <0){  

3.//TODO  

4.} 

var rtn = ocx.CreatePlayer(0, ”decTag”, ”guanhuistreamer”, -1);

if(rtn <0){

//TODO

} 

複制代碼CreatePlayer需要JavaScript傳遞4個參數進去（這裡隻涉及整形和字元串類型），并傳回一個數字類型的值作為判斷标志。

2.2 調用屬性 

調用屬性和方法一樣，隻是不用再傳遞參數給COM，如擷取播放器畫面數量的屬性：

Js代碼 1.var screenNums = ocx.screenNum; 

var screenNums = ocx.screenNum; 

複制代碼當然，也可以設定屬性的值，如，設定播放器畫面數量：

Js代碼 1.ocx.screenNum = 4; 

ocx.screenNum = 4; 

複制代碼3. 注冊COM事件并實作函數回調 

     我們可以調用的COM的方法和屬性來實作對COM的通路和設定。

     但這樣還不夠，因為我們不能總是主動去調用COM的方法或屬性來擷取資料。比如要擷取COM目前的狀态（狀态是不斷改變的）我們就要用譬如輪詢（如：window.setInterval()）這樣的方式不斷去通路接口，這樣既費時又浪費系統資源。

     是以，如果COM有一個通知事件，我們就可以将JavaScript函數注冊到COM事件中，當COM執行後調用該事件時就可以間接調用JavaScript函數來實作回調。這樣JavaScript就可以輕松的被動接收資料。

     以下是播放器視窗焦點變化時通知JavaScript做出的相關響應的一系列實作過程：

a) ActiveScreenChanged(LONG playerIndex)：是COM中的通知事件，在注冊時不用帶參數。

b) regOcxActiveScreen()：是JavaScript中的注冊事件；

c) listener_ActiveScreen(playerIndex)：是JavaScript中的回調函數，在注冊時不用帶參數。

1） 定義JavaScript注冊事件：

Js代碼 1.function regOcxActiveScreen() {  

2.var focus = document.getElementById("ocx");  

3.if ($.browser.msie) {  

4.//IE核心浏覽器的注冊方式  

5.focus.attachEvent("ActiveScreenChanged",listener_ActiveScreen);  

6.} else {  

7.//非IE核心浏覽器注冊方式  

8.//當然這裡其實沒有必要，因為隻有IE核心浏覽器才能執行此處讨論的COM元件  

9.focus.addEventListener("ActiveScreenChanged",listener_ActiveScreen);  

10.}  

11.} 

function regOcxActiveScreen() {

var focus = document.getElementById("ocx");

if ($.browser.msie) {

//IE核心浏覽器的注冊方式

focus.attachEvent("ActiveScreenChanged",listener_ActiveScreen);

} else {

//非IE核心浏覽器注冊方式

//當然這裡其實沒有必要，因為隻有IE核心浏覽器才能執行此處讨論的COM元件

focus.addEventListener("ActiveScreenChanged",listener_ActiveScreen);

}

複制代碼[也可以直接使用：ocx.attachEvent("ActiveScreenChanged",listener_ActiveScreen);來注冊就可以了，因為之前已經定義了ocx，此處隻是再取一個别名。]

2） 定義JavaScript回調函數：

Js代碼 1.function listener_ActiveScreen(playerIndex) {  

2.    $('#currentWin').html('播放視窗:' + playerIndex);  

function listener_ActiveScreen(playerIndex) {

    $('#currentWin').html('播放視窗:' + playerIndex);

複制代碼還有一種調用方式是直接在頁面中通過script标簽來實作的，如：

Js代碼 1.<script language="JavaScript" for="ocx" event="ocxMethod(parm)">  

2.alert(parm);  

4.</script> 

<script language="JavaScript" for="ocx" event="ocxMethod(parm)">

alert(parm);

</script>  

複制代碼這種方法個人不太喜歡，代碼結構完整性比較差。

本文轉自 wws5201985 51CTO部落格，原文連結：http://blog.51cto.com/wws5201985/737004，如需轉載請自行聯系原作者