JavaScript DOM动态创建（声明）Object元素

http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html

一文提及“等整个页面加载完毕后，根据用户所选的阅读机类型，再用JavaScript DOM动态创建（声明）Object元素。这样可以避免加载没用到的控件，避免页面加载过慢。”

文中“DOM创建、添加元素具体就不详述了。”一句带过的部分内容，有朋友需要。我也曾经是个菜鸟，摸索出来的，愿意分享给后来者；另外，我也深知有些设备调试需要耐心和经验。但是，我已经两年多没接触代码了，所以没可能说的很详细或准确；此外，基于保密，也没法全部代码贴出，只能说说思路。特此说明，大家有问题评论说明即可。

个人非常喜欢这种解决方案。最大的好处就是模块化了。做这种设备相关的都知道，设备有不同厂家，即使同个厂家，型号升级也是很正常的。旧的厂家退出，新的厂家中标要提供接口测试。怎么办呢？不同厂家接口都不同（除非，你方足够强势，强势到厂家为你们的系统特别定制，那你需要文档说明，要求提供什么接口，返回什么类型，但是。。。这个很难），新型号也要调试，厂家又天各一方，大家联调很难，又浪费时间。这种模块化就可以将这设备相关部分剥离开来，弄一个静态页面，将你系统相关的逻辑javascript放一个文件，不同厂家提供你所需的调用函数放另外一个单独文件，这样，你只要要求厂家按你要求提供接口即可，这样也方便调试。当然，静态页面和实际的生产环境还是可能有差别，但是这已经和功能关系不大了（比如生产环境Windows登录的帐号是权限受限，.ASPX动态页面和静态页面的差别，cache等等），调试需要的就是耐心和细心。

后记：改完代码后发现，虽然骨架还在，但是已经面目全非。看得懂就看吧，估计高手也不用看都知道；看不懂也就只能这样子了。我也喜欢直接抄别人代码，但是发现很多时候都行不通，最后次数多了只好自己好好学习原理，然后再在前人的基础上改进完善，以达到为己所用的目的。不然出问题也说不出个所以然。

黑体加粗部分就是动态添加object声明的。这部分也是需要特别耐心调试的。因为不同厂家，各属性都不同，有的需要添加a属性，有的不用，我保留了两个典型的型号。添加事件也不同，有的厂家需要带参数，有的不能；有的不能在此处往控件添加事件（有的事件会执行，有的不会，很奇怪，可能动态生成后页面没完全加载完毕，仅仅猜测而已），此时保险的做法就在页面写算了。此外，有的ocr空间设置display属性，也可能导致不能得到效果。有的控件自带调试gui界面，那可以先显示出来，方便调试。

还是那句话，原理很简单，需要的是耐心和细心。

//var m_ReaderOpened =false;//开关

//获取设备型号名称
function GetReaderName() {
var resutl = "";
switch(EF.iMachineType) {
case "1":
resutl = "叫什么名字的设备";
break;
........
default:
resutl = "未知类型:" + EF.iMachineType;
break;
}
return resutl;
}

//关闭设备释放资源——这个最需要注意，厂家接口做的不好，没有释放内存的话，很容易导致IE崩溃。
function CloseReader()
{
//if(m_ReaderOpened == false )return;
theTop.status = "CloseReader";

try {
switch(EF.iMachineType) {
case "1":
//...
break;
.......
default:
theTop.status = "未知类型:" + EF.iMachineType;
break;
}
}catch(e){
//alert("试图关闭端口时出错:"+e.message);
theTop.status = "试图关闭端口时出错:"+e.message;
}
}

//点击"xxxxx"按钮, 初始化设备, 加载ActiveX
function OpenReader()
{
//if(m_ReaderOpened == true)return;
theTop.status = "OpenReader";

//阅读机初始化失败产生的可能原因
var AdivseNote = "\n\r";
AdivseNote += "请确认设备:\n\r";
AdivseNote += "1.电源指示灯是否点亮(电源开关处于ON[开启]状态);\n\r"
AdivseNote += "2.数据线与计算机连接完好(串口或USB);\n\r";
AdivseNote += "3.所选设备型号["+ GetReaderName() +"]是否与实际设备一致;\n\r";
AdivseNote += "4.当前所插入的USB端口的驱动已安装(如果是需要安装驱动的型号);\n\r";
AdivseNote += "5.当前运行网客户端是否已开通USB端口;\n\r";
AdivseNote += "6.刷卡器端口可能已被其他窗口占用;\n\r"

try{
if(EF.iMachineType == "1")
//开启端口，初始化工作
........
} catch(e) {
alert("初始化设备["+ GetReaderName() +"]失败！" + e.message + AdivseNote);
btnCancel_Click();//初始化设备失败, 返回点击刷卡前的状态
//点击取消按钮无效，希望重新加载页面可以解决刷卡过程中出现的“端口被占用”的问题。
window.location.href = window.location.href;
return;
}
}

// 检查控件是否正确安装
function CheckExistOcr() {
try {
//各ActiveX的项目名称可以通过clsid在已安装控件包的客户端的注册表中查找到
var tmpObj;
switch(EF.iMachineType) {
case "1"://xxxxxxxxx00
tmpObj = new ActiveXObject("ProjectOcx.UserControlOcx");
break;
.............
default:
theTop.status = "未知读卡器类型:" + EF.iMachineType;
break;
}
return true;
} catch(e) {
$get("lblTips").style.display = "";
//$get("lblTips").innerText = "";//ActiveX 控件加载失败! -- 请检查浏览器的安全设置或确认是否已安装机所需安装包。
$get("lblTips").innerHTML = "<span style=\"color: red\">没有安装机["+ GetReaderName() +"]所需控件！</span>";
return false;
}
}

//根据选择机类型自动创建对象，避免页面加载过慢, 特别是机型号不断增加的情况下
function AutoCreateObjectBaseOnChoose() {
var inputElement = document.getElementById("inputElement");//元素容器
var ocxObject = document.createElement('object');//ocx控件对象
//var s = document.createElement('script');//给控件注册事件//temp
//s.type = "text/javascript";//temp
ocxObject.style.width = "0";
ocxObject.style.height = "0";

try {
switch(EF.iMachineType) {
case "1": //AAAAAAAA
ocxObject.id = "xxxxx";
ocxObject.name="xxxxx";
ocxObject.classid="clsid:xxxxxxxxxxxxxxxxxxxx";
ocxObject.codebase="xxxxx.ocx";
ocxObject.style.display = "none";
//s.EVENT = "ProductChange";//temp
//ocxObject.attachEvent("ProductChange", xxxxx_ProductChange);

//ocxObject.style.display = "none";//这句可能会导致事件无法触发——不同设备不同
//ocxObject.attachEvent("OnButtonEvent(nButtonFlag)", GetData);
break;

case "4": //BBBBBBBBBBB
ocxObject.id = "BBBOcr";
ocxObject.classid = "clsid:XXXXXXXXXXXXXXXXXXXXXXX";

//这里注册需要事件处理函数存在, 否则会导致注册失败. 改在页面声明不存在此问题——和厂家提供的ocr控件有关
//ocxObject.attachEvent("DocumentArrive", DocumentArrive);
//ocxObject.attachEvent("DataReady", DataReady);
//ocxObject.attachEvent("MreError", MreError);
break;
default:
theTop.status = "未知读卡器类型:" + EF.iMachineType;
break;
}
//s.FOR = ocxObject.id;//temp
//window.document.getElementsByTagName("head")[0].appendChild(s);//temp
//如果创建了对象, 再添加到页面, 即使长宽设置为0, 都会造成左下角一个空白方块
if(ocxObject.id && ocxObject.id.length > 0) {
inputElement.appendChild(ocxObject);
}
}catch(e){
alert("动态创建ocx对象失败:" + e.message);
theTop.status = "动态创建ocx对象失败:" + e.message;
}
}

window.attachEvent("onload", AutoCreateObjectBaseOnChoose);

//--------------------------------------------------------------------------
//以下是设备a
function DocumentArrive()
{
//到达事件响应事件
}

function DataReady()
{
//识别正确事件响应函数
}

function MreError()//识别错误事件
{
alert("识别失败, 请重刷!");
}
//--------------------------------------------------------------------------
//以下是设备B
function GetData() {
//将设备返回的数据进行处理，再显示在页面或使用
}
//--------------------------------------------------------------------------