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() {
//将设备返回的数据进行处理，再显示在页面或使用
}
//--------------------------------------------------------------------------