通过 Modernizr.load 加载 excanvas polyfill 失败

Question

我正在尝试在我的页面的特定于页面的 js 文件中加载 excanvas polyfill。该脚本文件插入在我的页面上的正文标记之后。

奇怪的是，如果我

<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 函数动态创建canvas 元素并将其添加到页面上的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 标签之外无法运行？

Answer 1

在给定的要求中，您可以使用像这样的 IE 条件语句...

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

就足够了...

该语句只能被 IE 版本低于 9 的版本理解，并且附加脚本标记。

Answer 2

您唯一错过的是关于如何使用 excanvas 的说明：

excanvas.js 文件必须包含在页面中标记中出现任何 canvas 元素之前。这是由于 IE 的限制，我们需要在 IE 看​​到标记中的任何实例之前施展魔法。建议放在头部。