3

自分のページのページ固有の js ファイルに excanvas ポリフィルをロードしようとしています。このスクリプト ファイルは、マイページの body タグの後に挿入されます。

奇妙なビットは、私が使用する場合

<script type='text/javascript' src='/Scripts/polyfills/excanvas.compiled.js'></script>

私の head タグでは、すべてがうまく機能しますが、必要がなければ、HTML5 準拠のブラウザーにこのスクリプトをロードする必要はありません。

当然のことながら、Modernizr を使用して選択的にロードしようとしました。これは完全に実行されていますが、機能していない JavaScript コードです。

<!-- language: lang-js -->
$(function () {
    Modernizr.load({
        test: Modernizr.canvas,
        nope: '/Scripts/polyfills/excanvas.compiled.js',
        complete: function () {
            setImage();
        }
    });

});

これはうまくいくようです。excanvas スクリプトが正常にロードされたように見えます。setImage 関数はキャンバス要素を動的に作成し、ページの div に追加します。これは IE9 では問題なく動作しますが、IE8 ではレンダリングに失敗します。

<!-- language: lang-js -->
function setImage() {

    var canvasHello = document.createElement('canvas');
    canvasHello.id = 'canvasHello';
    $('#divContent').append(canvasHello);

    if (!Modernizr.canvas) {
        G_vmlCanvasManager.initElement(canvasHello);
    }

    var canvasContext = canvasHello.getContext('2d');
    canvasContext.width = 800;
    canvasContext.height = 600;
    canvasContext.fillStyle = "#000000";
    canvasContext.fillRect(0, 0, 600, 800);

    var img = document.createElement('img');
    img.src = '/Content/images/hello.png';
    img.onload = function () {
        canvasContext.drawImage(img, 100, 25, 100, 100);
    }
}

何か見逃していましたか、それとも excanvas スクリプトが head タグの外で機能していませんか?

4

2 に答える 2

2

特定の要件では、次のような IE 条件文を使用できます...

<!--[if lt IE 9]>
<script src="script/excanvas.js"></script>
<![endif]-->

十分だろう....

このステートメントは、バージョン 9 未満の IE でのみ理解され、script タグが付加されます。

于 2012-08-17T07:47:29.933 に答える