Question

我正在尝试在页面特定的js文件中加载excanvas polyfill。此脚本文件将插入到我页面上的body标签之后。

奇怪的是，如果我使用

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

在我的标签中，一切都很好，但如果我不需要，我不一定要为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]-->

就足够了....

只有小于9的IE版本才会理解该语句，并附加脚本标记。

Answer 2

你唯一遗漏的是the instructions如何使用excanvas：

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

通过Modernizr.load加载excanvas polyfill失败

2 个答案: