通過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失敗

回答

相關問題