通过Modernizr.load加载excanvas polyfill失败

我正在尝试将excanvas polyfill加载到页面特定的js文件中以供我的页面使用。这个脚本文件插在我的页面的body标签之后。
通过Modernizr.load加载excanvas polyfill失败

奇怪的一点是，如果我在我的头标记使用

<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标签之外工作吗？

在给定的条件，你可以这样使用IE条件语句

来源

2011-12-14 shinyhat

这个例子似乎从同样的问题在IE 8受苦： http://msdn.microsoft.com/en-us/magazine/hh394148.aspx – shinyhat 2011-12-14 22:11:11

...

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

就足够了....

的语句只会被IE版本可以理解不到9脚本标签被附加。

来源

2012-08-17 07:47:29

你错过的唯一的事情是the instructions如何使用excanvas：

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

来源

2013-07-07 03:23:44 Prestaul

通过Modernizr.load加载excanvas polyfill失败

回答

相关问题