modernizr - 通过 Modernizr.load 加载 excanvas polyfill 失败

Question

我正在尝试在我的页面的特定于页面的 js 文件中加载 excanvas polyfill。此脚本文件插入到我页面上的 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 函数动态创建 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 以下的版本才能理解，并附上脚本标签。