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);  

3.//TODO  

4.} 

function listener_ActiveScreen(playerIndex) {

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

//TODO


复制代码还有一种调用方式是直接在页面中通过script标签来实现的,如:

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

2.alert(parm);  

3.//TODO  

4.</script> 

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

alert(parm);

//TODO

</script>  
复制代码这种方法个人不太喜欢,代码结构完整性比较差。










本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/737004,如需转载请自行联系原作者
目录
相关文章
|
3月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
40 7
|
3月前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
34 3
|
3月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
46 2
JavaScript基础-DOM操作:查找、创建、修改
|
2月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
33 1
|
2月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
31 1
|
3月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
37 1
|
3月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
24 1
|
3月前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
124 2
|
3月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
3月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
39 2