JavaScript 操作 COM 控件

feiyang10086

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. 1.<object classid="clsid:D4CCE975-3B00-417A-A520-B265FBFEB178" id="ocx" codebase="CarPlayCtrl.cab" standby="控件加载中..."></object>  
   
2. <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. 1.LONG CreatePlayer(LONG flag,ULONG decTag, BSTR streamerName， LONG playerIndex)  
   
2. LONG CreatePlayer(LONG flag,ULONG decTag, BSTR streamerName， LONG playerIndex)

复制代码

Javascript调用COM接口：

Js代码

1. 1.var rtn = ocx.CreatePlayer(0, ”decTag”, ”guanhuistreamer”, -1);   
   
2. 2.if(rtn <0){   
   
3. 3.//TODO   
   
4. 4.}  
   
5. var rtn = ocx.CreatePlayer(0, ”decTag”, ”guanhuistreamer”, -1);
   
6. if(rtn <0){
   
7. //TODO
   
8. }

复制代码

CreatePlayer需要JavaScript传递4个参数进去（这里只涉及整形和字符串类型），并返回一个数字类型的值作为判断标志。


2.2 调用属性
调用属性和方法一样，只是不用再传递参数给COM，如获取播放器画面数量的属性：

Js代码

1. 1.var screenNums = ocx.screenNum;  
   
2. var screenNums = ocx.screenNum;

复制代码

当然，也可以设置属性的值，如，设置播放器画面数量：

Js代码

1. 1.ocx.screenNum = 4;  
   
2. 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. 1.function regOcxActiveScreen() {   
   
2. 2.var focus = document.getElementById("ocx");   
   
3. 3.if ($.browser.msie) {   
   
4. 4.//IE内核浏览器的注册方式   
   
5. 5.focus.attachEvent("ActiveScreenChanged",listener_ActiveScreen);   
   
6. 6.} else {   
   
7. 7.//非IE内核浏览器注册方式   
   
8. 8.//当然这里其实没有必要，因为只有IE内核浏览器才能执行此处讨论的COM组件   
   
9. 9.focus.addEventListener("ActiveScreenChanged",listener_ActiveScreen);   
   
10. 10.}   
    
11. 11.}  
    
12. function regOcxActiveScreen() {
    
13. var focus = document.getElementById("ocx");
    
14. if ($.browser.msie) {
    
15. //IE内核浏览器的注册方式
    
16. focus.attachEvent("ActiveScreenChanged",listener_ActiveScreen);
    
17. } else {
    
18. //非IE内核浏览器注册方式
    
19. //当然这里其实没有必要，因为只有IE内核浏览器才能执行此处讨论的COM组件
    
20. focus.addEventListener("ActiveScreenChanged",listener_ActiveScreen);
    
21. }
    
22. }

复制代码

[也可以直接使用：ocx.attachEvent("ActiveScreenChanged",listener_ActiveScreen);来注册就可以了，因为之前已经定义了ocx，此处只是再取一个别名。]

2） 定义JavaScript回调函数：

Js代码

1. 1.function listener_ActiveScreen(playerIndex) {   
   
2. 2.    $('#currentWin').html('播放窗口:' + playerIndex);   
   
3. 3.//TODO   
   
4. 4.}  
   
5. function listener_ActiveScreen(playerIndex) {
   
6.     $('#currentWin').html('播放窗口:' + playerIndex);
   
7. //TODO
   
8. }

复制代码

还有一种调用方式是直接在页面中通过script标签来实现的，如：

Js代码

1. 1.<script language="JavaScript" for="ocx" event="ocxMethod(parm)">   
   
2. 2.alert(parm);   
   
3. 3.//TODO   
   
4. 4.</script>  
   
5. <script language="JavaScript" for="ocx" event="ocxMethod(parm)">
   
6. alert(parm);
   
7. //TODO
   
8. </script>  

复制代码

这种方法个人不太喜欢，代码结构完整性比较差。

冰释一片天

谢谢分享  希望于楼主多多交流

liangmian1

不错的控件教程

bokezyyx

真心赞的控件知识分享

bokezyyx

真心赞的控件知识分享

bokezyyx

不错的控件知识，感谢分享