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

Question

I'm fighting with IE8 and the flashcanvas.js plugin trying to capture a signature.

The demo works fine on IE8, but since I'm using a bunch of other plugins including requireJS, I'm running into some kind of problem on IE8.

I have nailed it down to this:

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

I don't understand why it's not working, but canvases[i] throws an [object HTMLUnknownElement] error.

Question :
Any idea what might be the cause? As a workaroud, how could I select the first element of my objectHTMLCollection without using [] and staying in Javascript!

I have also tried adding an id to the canvas element or select it by class (using Jquery). Same result, length=1 , select=forget it.

Thanks for help!

EDIT :
I'm requesting plugins like this from my main app 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 });
            });
        };

This calls an app.js file, which defines all dependencies required and once everything has loaded, fire the plugin:

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

So, I'm wasting an http-request for flashcanvas.js when I don't really need it. But all files are loaded allright, I believe...

Answer 1

How are you adding the canvas element to the DOM? Since IE8 doesn't support the canvas element, you need to create it dynamically and append it to the DOM, as shown in the FlashCanvas docs

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

Answer 2

Array document.getElementsByName(String balise) http://www.toutjavascript.com/reference/reference.php?iref=156

You wrote :

var canvases = document.getElementsByTagName(CANVAS);

Are you sure CANVAS is a String ? Maybe you want to write

var canvases = document.getElementsByTagName("CANVAS");

Answer 3

Try to convert the collection to an array:

var arr = Array.prototype.slice.call( canvases );