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

时间:2012-10-26 12:10:59

标签: javascript jquery canvas selector

我正在与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]错误。

问题
知道可能是什么原因?作为一个工作区,如何在不使用objectHTMLCollection并保留Javascript的情况下选择[]的第一个元素!

我还尝试在canvas元素中添加id或者按类选择它(使用Jquery)。同样的结果,length=1,select =忘了它。

感谢您的帮助!

修改
我正从我的主app控制器请求这样的插件:

$(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请求。但是所有文件都装好了,我相信......

3 个答案:

答案 0 :(得分:3)

如何将canvas元素添加到DOM?由于IE8不支持canvas元素,因此您需要动态创建它并将其附加到DOM,如FlashCanvas docs

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

答案 1 :(得分:1)

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

您写道:

var canvases = document.getElementsByTagName(CANVAS);

你确定CANVAS是一个字符串吗?也许你想写

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

答案 2 :(得分:0)

尝试将集合转换为数组:

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