javascript - 如何在不使用 [] 的情况下在 IE8 上的 javascript 中选择对象的第一个元素？

Question

我正在与 IE8 和 flashcanvas.js 插件进行斗争，试图捕获签名。

demo在 IE8 上工作正常，但由于我使用了一堆其他插件，包括 requireJS，所以我在 IE8 上遇到了某种问题。

我已将其确定为:

function onReadyStateChange() {
if (document.readyState === "complete") {
    document.detachEvent(ON_READY_STATE_CHANGE, onReadyStateChange);

    var canvases = document.getElementsByTagName(CANVAS);

    // => returns 1 in IE8 debugger
    console.log( canvases.length )
    // => returns objectHTMLCollection
    console.log( canvases )

    for (var i = 0, n = canvases.length; i < n; ++i) {
        console.log(" run "+i)

        // => this produces an error...
        console.log( canvases[i])

        // trigger
        FlashCanvas.initElement(canvases[i]);
        }
    }
}

我不明白为什么它不起作用，但 canvases[i] 抛出 [object HTMLUnknownElement] 错误。

问题:
知道可能是什么原因吗？作为解决方法，如何在不使用 [] 并留在 Javascript 中的情况下选择 objectHTMLCollection 的第一个元素!

我还尝试将 id 添加到 canvas 元素或按类选择它(使用 Jquery)。相同的结果，length=1，select=forget it。

感谢您的帮助!

编辑:
我正在从我的主应用程序 Controller 请求这样的插件:

$(document).on('pagebeforeshow', '#basket', function(e, data){  

    // signaturePad
    var signIt = $('.signatureWrapper');
    if ( signIt.length > 0 && signIt.jqmData('bound') != true ) {
        signIt.jqmData('bound', true);

        require(['services/signature/app'], function (App) {
        App.render({target: signIt, drawOnly: true });
            });
        };

这会调用一个 app.js 文件，该文件定义了所需的所有依赖项，一旦所有内容都加载完毕，就启动插件:

define([  'services/signature/app'
        , 'services/signature/jquery.signaturepad.min'
        , 'services/signature/json2.min'
        , 'services/signature/flashcanvas'
        ], function( app, signature, json2, flashcanvas ) {

    function render(parameters) {
        parameters.target.signaturePad({ drawOnly:parameters.drawOnly });
        };
        return {
            render:render
            };  
        });

所以，当我并不真正需要它时，我浪费了对 flashcanvas.js 的 http 请求。但所有文件都加载正常，我相信......

Answer 1

如何将 canvas 元素添加到 DOM 中？由于IE8不支持canvas元素，因此需要动态创建它并将其附加到DOM，如FlashCanvas docs所示

var canvas = document.createElement("canvas");
document.getElementById("target").appendChild(canvas);
if (typeof FlashCanvas != "undefined") {
    FlashCanvas.initElement(canvas);
}