Архивы javascript - Страница 8 из 10

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

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

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

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); 
}

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);

}

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

Оставить комментарий javascript, динамическая загрузка скриптов

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

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

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

Решение:

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

Выводим на странице скрытый текстовый блок

<textarea style="display:none;" id="url_to_copy"></textarea>

1

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

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

Пример кода:

           
$("#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");

$("#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");

Оставить комментарий clipboard, javascript, буфер обмена

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

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

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

Решение:

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

$.ajax({

url: "controller/server/lanbilling/listgrp.php?blibaseid="+blibaseid,

async: false

}).done(function(data) {

$("#grpd").html(data);

});

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

Оставить комментарий ajax, async, javascript, sync, синхронная загрузка, синхронное выполнение

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

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

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

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

Оставить комментарий astra, javascript, websocets, WebSocket

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

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

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

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

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

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

         canvas.forEachObject(function(obj) {    
          };

1 2	canvas.forEachObject(function(obj) { };

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

canvas.clear();

1	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);

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 сейчас, обьект по которому "щелкнули"
 });

canvas.on('object:selected', function(e) {

p = e.target;

// в p сейчас, обьект по которому "щелкнули"

});

Оставить комментарий fabric.js, javascript

« 1 … 6 7 8 9 10 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						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