实现原理:将Object标签以字符串的形式添加到页面的body中,通过attachEvent方式为AxtiveX添加响应事件,采用延迟读取缓存串口信息完成串口通信,利用执行回调函数完成参数与页面的参数传递与响应。以下是具体实现过程:
mscomm.js文件内容:
// JavaScript Document
function createMSComm(callBackFunction) {
var mscomm_str = "<OBJECT id=MSComm1 CLASSID='clsid:648A5600-2C6E-101B-82B6-000000000014' codebase='MSCOMM32.OCX' type='application/x-oleobject' style='width:100px;height:30px' >"
+"<PARAM NAME='CommPort' VALUE='1'/> "
+"<PARAM NAME='DataBits' VALUE='8'/> "
+"<PARAM NAME='StopBits' VALUE='1'/>"
+"<PARAM NAME='BaudRate' VALUE='9600'/>"
+"<PARAM NAME='Settings' VALUE='9600,N,8,1'/>"
+"<PARAM NAME='RTSEnable' VALUE='1'/>"
+"<PARAM NAME='DTREnable' VALUE='1'/>"
+"<PARAM NAME='Handshaking' VALUE='0'/>"
+"<PARAM NAME='NullDiscard' VALUE='0'/> "
+"<PARAM NAME='ParityReplace' VALUE='?'/>"
+"<PARAM NAME='EOFEnable' VALUE='0'/>"
+"<PARAM NAME='InputMode' VALUE='0'/>"
+"<PARAM NAME='InBufferSize' VALUE='1024'/>"
+"<PARAM NAME='InputLen' VALUE='1'/>"
+"<PARAM NAME='OutBufferSize' VALUE='512'/>"
+"<PARAM NAME='SThreshold' VALUE='0'/>"
+"<PARAM NAME='RThreshold' VALUE='1'/>"
+"</OBJECT>";
// 将OBJECT标签添加到body中
document.body.insertAdjacentHTML(' beforeEnd',mscomm_str);
// 打开串口
if(MSComm1.PortOpen==false){
try{
MSComm1.PortOpen=true;
}catch(ex){
alert("com1端口打开失败:"+ex.message);
}
}
// 串口响应事件
MSComm1.attachEvent("OnComm",function() {
switch(MSComm1.CommEvent){
case 2: //接收事件
if(mscomm_scan_value == "") {
mscomm_scan_value = MSComm1.Input;
// 定时读取缓存信息
setTimeout("getMSCommScanValue()",300);
}
break;
default: alert("Event Raised!"+MSComm1.CommEvent);
}
});
}
// 串口接收内容
var mscomm_scan_value = "";
// 读取缓存中剩余信息
function getMSCommScanValue(){
// 读取缓存中剩余的信息
while(MSComm1.inBufferCount > 0) {
mscomm_scan_value += MSComm1.Input;
}
// 执行页面传递过来的函数
callBackFunction(mscomm_scan_value);
// 清空当前读取信息
mscomm_scan_value = ""
}
test.html文件:
<html>
<head>
<title>JavaScript串口测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<script type="text/javascript" src="mscomm.js" >
</script>
<script type="text/javascript">
var i = 0;
function mscommCallBack(scanValue) {
var ewtm = document.getElementById("ewtm");
ewtm.innerHTML += "第" + (++i) + "次扫描:" + scanValue;
}
window.onload = function() {
createMSComm(mscommCallBack);
}
</script>
</head>
<body>
二维条码:
<div id="ewtm"></div>
</body>
</html>
分享到:
相关推荐
JavaScript实例应用 JavaScript实例应用 JavaScript实例应用
通过由浅入深的讲解,你将学会如何构建具有丰富交互以及优雅体验的JavaScript应用,书中同样提供了大量的示例代码,可以帮助你更深入的理解很多重要的概念。 揭开MVC的神秘面纱,教你如何设计合理的架构以及处理...
第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组...
第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数...
JavaScript应用 注册验证 列表框内容的添加 加法练习 表格背景 表格行的颜色
JavaScript语言与Ajax应用(第二版)-源代码-董宁-51704128
基于MVC的JavaScript Web富应用开发(完整版)
javaScript应用软件javaScrijavaScript应用软件pt应用软件
这是关于如何运用javascript开发移动应用程序的方法,不过主要针对初学者,希望对你们有所帮助。
300个JavaScript应用实例 300个JavaScript应用实例
经典的JavaScript应用!这个有很多JavaScript经典应用!适合学生或者开发人员!
《挑战JavaScript & Ajax 应用开发》随书光盘,内容很丰富,欢迎下载
挑战javascript&ajax应用及开发技术,通过简易学习从而提升自己编程能力
《单页Web应用:JavaScript从前端到后端》大约三分之二的内容专门讲解单页Web应用的客户端开发,先定义何为JavaScript单页应用,接着介绍书中使用的单页Web应用的架构,然后依次讲解Shell模块、功能模块、Model模块...
计算机网络应用计算机网络应用JavaScriptJavaScript
《挑战JavaScript & Ajax应用开发》内容简介:Ajax是当今网络应用开发的主流技术,JavaScript是其核心,《挑战JavaScript & Ajax应用开发》从企业开发的实际需求出发,通过范例全方位介绍这2种Web开发技术及其综合...
《React Native:用JavaScript开发移动应用》PDF版本下载
JavaScript应用实例集合
第5节 JavaScript流程控制及应用.rar第5节 JavaScript流程控制及应用.rar第5节 JavaScript流程控制及应用.rar第5节 JavaScript流程控制及应用.rar第5节 JavaScript流程控制及应用.rar第5节 JavaScript流程控制及应用...