Не удается загрузить polyfill excanvas через Modernizr.load - PullRequest
Новая
       22

Не удается загрузить polyfill excanvas через Modernizr.load

3 голосов
/ 15 декабря 2011

Я пытаюсь загрузить polyfill excanvas в js-файл для своей страницы. Этот файл скрипта вставляется после тега 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?

Ответы [ 2 ]

2 голосов
/ 17 августа 2012

в данном требовании вы можете использовать условные операторы IE, как это ... 

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

будет достаточно ....

оператор будет понятен только в версии IEчем 9, и тег script прикрепляется.

0 голосов
/ 07 июля 2013

Единственное, что вы пропустили, это инструкции о том, как использовать excanvas:

Файл excanvas.js должен быть включен на страницу перед любым появлением элементов canvasразметка.Это связано с ограничениями в IE, и мы должны сделать свое волшебство, прежде чем IE увидит какой-либо экземпляр в разметке.Рекомендуется положить его в голову.

...