04.12.2013 - ЖЗГ

Определение текущего браузера.

04.12.2013 Павел Грибов WEB

Так уж получилось, что в настоящее время существует целый зоопарк различных браузеров для просмотра страниц. И все они могут отображать страницы чуть-чуть по разному. А иногда, когда браузер совсем старый, а в проекте используются новые технологии, страница может быть отображена совсем не верно. Есть два пути решения — можно писать используя только те возможности, которые будет заведомо работать в самых распространенных браузерах. Если это не возможно, правилом хорошего тона считается предупредить пользователя, что в данном браузере страница может отображаться не корректно.

Самый простой способ определения браузера — при помощи Jquery. До версии Jquery 1.9, даный функционал у него в базе. После — предполагается что используется дополнительная библиотека «для поддержки старых проектов«. Описание API Jquery Browser здесь. Пример вот он:

    <script>
    if (jQuery.browser.msie==true) { if ((jQuery.browser.version == '6.0')||(jQuery.browser.version == '7.0')||(jQuery.browser.version == '8.0'))  {
        alert('Внимание! Ваш браузер устарел. Обновите IE  до версии 9.0 и выше. Корректная работа приложения не возможна');
    }}       
    if (jQuery.support.boxModel==false) {
        alert('Внимание! Ваш браузер устарел. Корректная работа приложения не возможна');
        }
</script>

if (jQuery.browser.msie==true) { if ((jQuery.browser.version == '6.0')||(jQuery.browser.version == '7.0')||(jQuery.browser.version == '8.0')) {

alert('Внимание! Ваш браузер устарел. Обновите IE до версии 9.0 и выше. Корректная работа приложения не возможна');

}}

if (jQuery.support.boxModel==false) {

alert('Внимание! Ваш браузер устарел. Корректная работа приложения не возможна');

}

</script>

boxModel: устанавливается в true, если страница обрабатывается браузером в соответствие с моделью W3C CSS Box Model (в настоящий момент не поддерживается в IE 6 и 7, когда они в режиме Quirks Mode). Пока документ полностью не загружен, данное свойство имеет значение null.

Оставить комментарий Jquery, определение браузера

«Убираем за собой» или уничтожение обьектов в JavaScript

04.12.2013 Павел Грибов WEB

Сегодня столкнулся с тем что когда работаешь с JavaScript иногда приходится «подчищать» за собой. Например: подгружаем при помощи AJAX некий html в котором в есть в свою очередь код на JavaScript.

jQuery("#list2").jqGrid('navButtonAdd','#pager2',{caption:"Отредактировать",                              
	onClickButton:function(){
              var gsr = jQuery("#list2").jqGrid('getGridParam','selrow');
		if(gsr){                     
                       //$("#pg_add_edit" ).dialog( "destroy" );
                       $("#pg_add_edit").dialog({autoOpen: false,height: 600,width: 800,modal:true,title: "Редактирование новости" });
                       $("#pg_add_edit" ).dialog( "open" );                                   
                       $("#pg_add_edit").load("client/view/news/news.php?step=edit&id="+gsr);
                       } else {
			alert("Сначала выберите строку!")
		}							
	}
});

jQuery("#list2").jqGrid('navButtonAdd','#pager2',{caption:"Отредактировать",

onClickButton:function(){

var gsr = jQuery("#list2").jqGrid('getGridParam','selrow');

if(gsr){

//$("#pg_add_edit" ).dialog( "destroy" );

$("#pg_add_edit").dialog({autoOpen: false,height: 600,width: 800,modal:true,title: "Редактирование новости" });

$("#pg_add_edit" ).dialog( "open" );

$("#pg_add_edit").load("client/view/news/news.php?step=edit&id="+gsr);

} else {

alert("Сначала выберите строку!")

}

});

Вот подгружаемый код:

<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<div id="messenger"></div>    
<form ENCTYPE="multipart/form-data" action="?content_page=news&step=<?php echo "$step&newsid=$id"; ?>" method="post" name="form1" target="_self">
    <input name=dtpost id=dtpost value="<?php echo "$dtpost"; ?>"><br>
    <input name=title  id=title value="<?php echo "$title";?>" class="span8" placeholder="Заголовок"><br>
    <textarea class="span12" name=txt  rows="15" placeholder="Введите новость">
        <?php echo "$txt";?>
    </textarea>
</form>

 <script>
$( "#pg_add_edit" ).dialog({
  close: function() {$( "#dtpost" ).datepicker( "destroy" );
   tinymce.activeEditor.destroy();
   }
});

    $("#dtpost").datepicker();
    $("#dtpost").datepicker( "option", "dateFormat", "dd.mm.yy");            
<?php if ($step!='edit'){?>    
    $("#dtpost").datepicker( "setDate" , "0");
<?php } else {?>        
 $("#dtpost").datepicker( "setDate" , "<?php  echo "$dtpost"; ?>");
<?php };?>    
    tinymce.init({selector:'textarea'});
</script>

<form ENCTYPE="multipart/form-data" action="?content_page=news&step=<?php echo "$step&newsid=$id"; ?>" method="post" name="form1" target="_self">

<input name=title id=title value="<?php echo "$title";?>" class="span8" placeholder="Заголовок"><br>

<?php echo "$txt";?>

</textarea>

</form>

$( "#pg_add_edit" ).dialog({

close: function() {$( "#dtpost" ).datepicker( "destroy" );

tinymce.activeEditor.destroy();

}

});

$("#dtpost").datepicker();

$("#dtpost").datepicker( "option", "dateFormat", "dd.mm.yy");

<?php if ($step!='edit'){?>

$("#dtpost").datepicker( "setDate" , "0");

<?php } else {?>

$("#dtpost").datepicker( "setDate" , "<?php echo "$dtpost"; ?>");

<?php };?>

tinymce.init({selector:'textarea'});

</script>

Т.е. чтоб не плодить datepicker и редакторы tinymce каждый раз, как будет нажата кнопка «отредактировать», отлавливаем закрытие диалогового окна. После закрытия — уничтожаем объекты datepicker и редакторы tinymce. Т.е. если не уничтожите, может ничего страшного и не случится. Но потенциальная утечка памяти. Открыл-закрыл 10 раз — ушло 10 мегабайт.

Обычно я тоже не особо обращал внимание на такие мелочи, ибо не слишком часто сталкиваешься с ситуацией, что какой то объект на странице нуждается в создании много раз.

Оставить комментарий ajax, Jquery, уничтожение обьектов

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31