Архив метки: javascript

WEB

Динамическая загрузка скриптов на JavaScript

Комментариев нет

В том случае если необходимо динамически подгрузить на страницу какие-то скрипты, возможно использовать например прообраз следующего кода:

window.onload=function(){
    if (typeof jQuery == 'undefined') {    
	dhtmlLoadScript("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
    };
	//проверяем, а подгрузился ли juery?
	var timerId = setInterval(function() {
	    if (typeof jQuery == 'undefined'){
		console.log("--еще не догрузился jquery..ждем..");
	    } else {
		dhtmlLoadScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js");		
		console.log("--вроде jquery загрузился, гружу jquery-ui..");		
		clearInterval(timerId);
		var timerId2 = setInterval(function() {		
		    if (typeof $.ui == 'undefined'){
			console.log("--еще не догрузился jquery-ui..ждем..");
		    } else {
			clearInterval(timerId2);
			console.log("--вроде jquery-ui загрузился, инициализирую чат..");					
			mainchat();
		    };		    
		},1000);		
	    };	    
	}, 1000);	
	
};
function dhtmlLoadScript(url){
   var e = document.createElement("script");
   e.src = url;
   e.type="text/javascript";
   document.getElementsByTagName("head")[0].appendChild(e); 
}

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

WEB

Добавление текста в буфер обмена на JavaScript

Комментариев нет

Необходимо скопировать в буфер обмена некий текст. Задача осложнаяется тем, что браузеры позволяют скопировать в буфер, в целях безопасности только программно выделенный текст. Т.е. не получится скопировать в буфер любой текст, а возможно только тот, который находится в тегах типа input, textarea и т.п.

Решение:

Работать будет только в сборках браузеров старше 2015года!

  1. Выводим на странице скрытый текстовый блок 
    <textarea style="display:none;" id="url_to_copy"></textarea>
  2. По нажатию кнопки «Скопировать», показываем этот блок. К сожалению иначе выделение не работает, приходится показывать.
  3. Заносим в этот блок текст необходимый для копирования в буфер
  4. Программно выделяем текст
  5. Убираем с глаз долой этот текстовый блок.

Как показывает практика при умелом «прятаньи» этого блока в тексте страницы, пользователь ничего не замечает.

Пример кода:

           
$("#url_to_copy" ).show();
url="https://nocfcefertelesererfe.ru/index.php?content_page=lanbilling/sos&billing_id="+$("#blibase").val()+"&agrm_id="+id;            
$("#url_to_copy").val(url);           
url_to_copy.select();
document.execCommand("copy");
$("#url_to_copy").attr("display:none");
WEB

Синхронная загрузка ajax при использовании jQuery

Комментариев нет

Задача: строго последоватально подгрузить код на страницу.

Решение:

  $.ajax({
        url: "controller/server/lanbilling/listgrp.php?blibaseid="+blibaseid,        
        async: false                
    }).done(function(data) {	    
	    $("#grpd").html(data);            	
    });

Конечно это считается не правильным подходом, т.к. в целом замедляет загрузку страницы. Однако в некоторых случая это просто необходимо. Например, когда нужно получить некое значение из загружаемого участка, а участок не понятно, уже подгрузился или еще нет.

WEB

Берём данные мониторинга с сервера Астры через сокеты

Комментариев нет

Задача: вытянуть на веб страницу данные по текущему битрейту каналов на карте с мониторинга на сервере астры.

Удачно сложилось, что сам «штатный» мониторинг сервера обменивается между своим ядром и веб страницей через соединение websocets. Это можно использовать, написав свой сервис «цепляющийся» к астре и получающий данные. Читать далее Берём данные мониторинга с сервера Астры через сокеты →

WEB

Библиотека для работы с графикой на JavaScript

Комментариев нет

Последнее время активно работаю с библиотекой fabric.js, для работы с графикой на JavaScript, а именно делаю «редактор муфт»:

Снимок экрана из 2015-07-28 10:13:49

Библиотека позволяет на холсте canvas работать с графикой как с объектами: выделять, изменять, назначать обработчики событий (выделение, клик, перемещение и т.п.) для каждого объекта. Ну и еще много всего. В то-же время она достаточно проста в освоении.

Однако приведу несколько моментов, на которые пришлось потратить время, что-бы разобраться:

1) Перебор всех объектов в canvas:

         canvas.forEachObject(function(obj) {    
          };

2)  Для очистки canvas от всех объектов:

canvas.clear();

3) Закраска объекта градиентом:

              var rect = new fabric.Rect({left: 20,top: 0,fill: 'yellow',width: wx-40,height: steph,selectable:false,shadow: 'green 2px 2px 2px'});
                        rect.setGradient('fill', {x1: 0,y1: 0,x2: 0,y2:  rect.height,colorStops: {1: '#000',0: '#fff'}});              
                        canvas.add(rect);

4) Назначение событий:

canvas.on('object:selected', function(e) {
    p = e.target;
// в p сейчас, обьект по которому "щелкнули"
 });