Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Наши скрипты > Про динамическую загрузку excanvas.

Автор: ksnk 4.6.2010, 18:10

Это не совсем "наши скрипты", но вроде не так уж и не к месту.

В принципе, с использованием библиотеки http://code.google.com/p/explorercanvas/ можно решить, в достаточно широком смысле, проблемы с кроссброузерностью этого тега. Вставка библиотеки в страничку по документации рекомендуется делать вот так

Код


<!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

получается достаточно прилично и в ненужные броузеры ненужные функции грузится не будут.

Сложее, если загрузка этого файла требуется в динамике. К примеру после подгрузки ajax модуля оказывается интересным его подкрасить вручную. Вот в этом случае придется покувыркаться.

для начала - динамическая загрузка скрипта excanvas с проверкой его загруженности.

Код


var util={
..
     appendScript:function(src,callback){
        var scriptElem = document.createElement('script');
        scriptElem.setAttribute('type','text/javascript');
        if(callback){
         scriptElem.onload=function(){
             scriptElem.onreadystatechange=null;
             scriptElem.onload=null;
             callback();
         };
         scriptElem.onreadystatechange=function(){
             if ('loaded' == this.readyState) {
                 scriptElem.onload();
             }
         }
        }
        scriptElem.setAttribute('src',src);
        document.getElementsByTagName('head')[0].appendChild(scriptElem);
    },
...
};

вызов вставки кода делается примерно так, с использованием условной компиляции от IE :

Код


    /*@if (@_jscript_version >= 1)
     this.appendScript('excanvas.compiled.js',function(){util.excanvas_complete=true;});
    /*@end @*/

К сожалению, инициализация библиотеки excanvas завязана на событие onreadystatechange. которое в AJAX приложении уже сработало и больше не вызывается, так что его нужно поддернуть вручную.

Код


    /*@if (@_jscript_version >= 1)
            function xxx(){
              if(this.excanvas_complete && G_vmlCanvasManager){
                if (!document.namespaces || !document.namespaces['g_vml_']){
                    G_vmlCanvasManager.init_(document);
                } 
// собственная инициализация полотна
                fly=document.createElement('canvas');
                fly.setAttribute('id', 'fly');
                fly.setAttribute('width','<%=$fWidth%>');
                fly.setAttribute('height','<%=$fHeight%>');
                this._fly_element=document.body.appendChild(fly);
                G_vmlCanvasManager.initElement(this._fly_element);
              }
              else
                setTimeout(xxx.bind(this),100);
            }
            setTimeout(xxx.bind(this),100);
        @else @*/
// собственная инициализация полотна
            fly=document.createElement('canvas');
            fly.setAttribute('id', 'fly');
            fly.setAttribute('width','<%=$fWidth%>');
            fly.setAttribute('height','<%=$fHeight%>');
            this._fly_element=document.body.appendChild(fly);
        /*@end @*/

Тут используются те факты, что переменная G_vmlCanvasManager выставляется самим excanvas, а по изменениям в document.namespaces можно понять вызвался ли инициализатор или нет. Опять-же, динамически созданный элемент canvas нужно проинициализировать вручную, вызвав для него G_vmlCanvasManager.initElement.
Идеология ожидания событияпростая, сидим в таймаутах по 100 ms и дожидаемся, пока не выставятся нужные признаки...

Функции и техника, вероятно, могут быть полезны при использовании и других сторонних скриптов...