Архивы html

Затененный задний фон для модального окна

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

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

.application:before {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;

background-size: cover;

filter: blur(2px);

}

.application:after {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.5);

}

.select_area_color_lent_tag{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 250px;

height: 250px;

background-color: white;

border: 1px solid black;

padding: 20px;

display: flex;

flex-wrap: wrap;

text-align: center;

justify-content: space-around;

z-index: 20;

}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>

1	<div class="application" style="display: none"> <div class="select_area_color_lent_tag"> </div> </div>

В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:

$(".application").show()

1	$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

Оставить комментарий css, html, затененный задний фон

Простой парсер таблицы в массив из HTML

06.03.2024 Павел Грибов PHP

Задача: необходимо преобразовать страницу HTML, в которой данные размещены в виде стандартной таблицы обрамленной тегами <table></table>, в двумерный массив на PHP (парсер таблицы в массив).

<table>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
</table>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Сначала я хотел решить задачу «в лоб», а именно искать теги в тексте, писать функционал по вычленению данных между тегами.. Но потом подумал, что «наверное всё уже придумано до нас», для подобных задач. Ну и собственно оказался прав. Задачу решил без лишних усилий в течении минут 5.

Решение: воспользуюсь PHP функцией DOMDocument для того чтобы преобразовать текст в DOM объект:

    $contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";
    $DOM = new DOMDocument;
    $DOM->loadHTML($contents);

$contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";

$DOM = new DOMDocument;

$DOM->loadHTML($contents);

Так я получаю построенное DOM дерево. Затем получаю все «ветки» по имени tr, и перебираю их, одновременно перебирая «всех листья» (т.е. тэги td):

function tdrows($elements){
  $str = [];
    foreach ($elements as $element) {$str[]= $element->nodeValue;}
  return $str;
}

function getdata($contents){
    $contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";
    $DOM = new DOMDocument;
    $DOM->loadHTML($contents);
    $items = $DOM->getElementsByTagName('tr');
    $mass=[];
    foreach ($items as $node) {
        $mass[]=tdrows($node->childNodes);
    }
    return $mass;
}

$mass=getdata($table);
var_dump($mass);

function tdrows($elements){

$str = [];

foreach ($elements as $element) {$str[]= $element->nodeValue;}

return $str;

}

function getdata($contents){

$contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";

$DOM = new DOMDocument;

$DOM->loadHTML($contents);

$items = $DOM->getElementsByTagName('tr');

$mass=[];

foreach ($items as $node) {

$mass[]=tdrows($node->childNodes);

}

return $mass;

}

$mass=getdata($table);

var_dump($mass);

Данные я передал в двухмерный массив $mass, т.е. задача «парсер таблицы в массив» решена

парсер таблицы в массив через построение DOM

Ну а тут ссылка на подобную же задачу, но вместо HTML документа — файл формата XML

Оставить комментарий html, php, массив, таблица

1С: Получить таблицы из Html

25.01.2023 Павел Грибов 1C

Задача: в неком html файле содержится несколько таблиц. Необходимо их распарсить и обработать силами 1С

Решение: воспользуемся построителем DOM. Результатом работы функции будет массив таблиц html документа.

&НаСервере
Функция УбратьНеОбрабатываемыеСимволы(стр)
	стр=стрзаменить(стр," ","_");
	стр=стрзаменить(стр,"№","N");
	стр=стрзаменить(стр,"-","_");
	стр=стрзаменить(стр,".","_");
	стр=стрзаменить(стр,",","_");
	стр=стрзаменить(стр,"/","_");
	возврат стр;
конецфункции	
&НаСервере
Функция ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла)	
	
	ДвоичныеДанные = ПолучитьИзВременногоХранилища(АдресХранилищаФайла);
	ИмяВременногоФайлаСпр = ПолучитьИмяВременногоФайла("html");
	ДвоичныеДанные.Записать(ИмяВременногоФайлаСпр);     
	
	ЧтениеHTML = Новый ЧтениеHTML;
	ЧтениеHTML.ОткрытьФайл(ИмяВременногоФайлаСпр, "UTF-8");

	ПостроительDOM = Новый ПостроительDOM;
	ДокументHTML = ПостроительDOM.Прочитать(ЧтениеHTML);
	ЭлементыТаблицы = ДокументHTML.ПолучитьЭлементыПоИмени("table");
	
	МассивТаблиц=Новый Массив();	
	для каждого таблица из	ЭлементыТаблицы цикл
	  ТЗ=Новый ТаблицаЗначений();	
	  строкиТаблицы=таблица.ПолучитьЭлементыПоИмени("tr");	
	      ПрочитаноСтрок=0;
		  для каждого строкаТаблицы из	строкиТаблицы цикл
		  	колонки=строкаТаблицы.ПолучитьЭлементыПоИмени("td");			
			ПрочитаноКолонок=0;
			для каждого колонка из колонки цикл
				если ПрочитаноСтрок=0 тогда
					ТЗ.Колонки.Добавить(УбратьНеОбрабатываемыеСимволы(колонка.ТекстовоеСодержимое));
				иначе
					если ПрочитаноКолонок=0 тогда
					 нс=ТЗ.Добавить()
				    конецесли;		 
				    нс[ПрочитаноКолонок]=колонка.ТекстовоеСодержимое;
				конецесли;	
				ПрочитаноКолонок=ПрочитаноКолонок+1;
			конеццикла;		
			ПрочитаноСтрок=ПрочитаноСтрок+1;
		  конеццикла;
	  МассивТаблиц.Добавить(ТЗ);
	конеццикла;	
	ЧтениеHTML.Закрыть();											
	
конецфункции

&НаКлиенте
Процедура ЗагрузитьФайл(Команда)
Режим = РежимДиалогаВыбораФайла.Открытие;
    ДиалогОткрытияФайла = Новый ДиалогВыбораФайла(Режим);
    ДиалогОткрытияФайла.ПолноеИмяФайла = "";
    Фильтр = НСтр("ru = 'Текст'; en = 'Text'")+ "(*.xls)|*.xlsx";
    ДиалогОткрытияФайла.Фильтр = Фильтр;
    ДиалогОткрытияФайла.МножественныйВыбор = ложь;
    ДиалогОткрытияФайла.Заголовок = "Выберите файлы";
    Если ДиалогОткрытияФайла.Выбрать() Тогда
        МассивФайлов = ДиалогОткрытияФайла.ВыбранныеФайлы;
		ФайлСМС="";
		Для Каждого ИмяФайла Из МассивФайлов Цикл
			ФайлСМС=ИмяФайла;
		конеццикла;
		если ФайлСМС<>"" тогда 			
					АдресХранилищаФайла = "";			
					Состояние("Перемещаю файл на сервер");
		            ПоместитьФайл(АдресХранилищаФайла, ФайлСМС, , Ложь, ЭтаФорма.УникальныйИдентификатор);   					
					Состояние("Обрабатывается файл "+ФайлСМС);							
					таблицы=ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла);					
		иначе
			сообщить("Файл не выбран");
		конецесли;	
	конецесли;	        
КонецПроцедуры

&НаСервере

Функция УбратьНеОбрабатываемыеСимволы(стр)

стр=стрзаменить(стр," ","_");

стр=стрзаменить(стр,"№","N");

стр=стрзаменить(стр,"-","_");

стр=стрзаменить(стр,".","_");

стр=стрзаменить(стр,",","_");

стр=стрзаменить(стр,"/","_");

возврат стр;

конецфункции

&НаСервере

Функция ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла)

ДвоичныеДанные = ПолучитьИзВременногоХранилища(АдресХранилищаФайла);

ИмяВременногоФайлаСпр = ПолучитьИмяВременногоФайла("html");

ДвоичныеДанные.Записать(ИмяВременногоФайлаСпр);

ЧтениеHTML = Новый ЧтениеHTML;

ЧтениеHTML.ОткрытьФайл(ИмяВременногоФайлаСпр, "UTF-8");

ПостроительDOM = Новый ПостроительDOM;

ДокументHTML = ПостроительDOM.Прочитать(ЧтениеHTML);

ЭлементыТаблицы = ДокументHTML.ПолучитьЭлементыПоИмени("table");

МассивТаблиц=Новый Массив();

для каждого таблица из ЭлементыТаблицы цикл

ТЗ=Новый ТаблицаЗначений();

строкиТаблицы=таблица.ПолучитьЭлементыПоИмени("tr");

ПрочитаноСтрок=0;

для каждого строкаТаблицы из строкиТаблицы цикл

колонки=строкаТаблицы.ПолучитьЭлементыПоИмени("td");

ПрочитаноКолонок=0;

для каждого колонка из колонки цикл

если ПрочитаноСтрок=0 тогда

ТЗ.Колонки.Добавить(УбратьНеОбрабатываемыеСимволы(колонка.ТекстовоеСодержимое));

иначе

если ПрочитаноКолонок=0 тогда

нс=ТЗ.Добавить()

конецесли;

нс[ПрочитаноКолонок]=колонка.ТекстовоеСодержимое;

конецесли;

ПрочитаноКолонок=ПрочитаноКолонок+1;

конеццикла;

ПрочитаноСтрок=ПрочитаноСтрок+1;

конеццикла;

МассивТаблиц.Добавить(ТЗ);

конеццикла;

ЧтениеHTML.Закрыть();

конецфункции

&НаКлиенте

Процедура ЗагрузитьФайл(Команда)

Режим = РежимДиалогаВыбораФайла.Открытие;

ДиалогОткрытияФайла = Новый ДиалогВыбораФайла(Режим);

ДиалогОткрытияФайла.ПолноеИмяФайла = "";

Фильтр = НСтр("ru = 'Текст'; en = 'Text'")+ "(*.xls)|*.xlsx";

ДиалогОткрытияФайла.Фильтр = Фильтр;

ДиалогОткрытияФайла.МножественныйВыбор = ложь;

ДиалогОткрытияФайла.Заголовок = "Выберите файлы";

Если ДиалогОткрытияФайла.Выбрать() Тогда

МассивФайлов = ДиалогОткрытияФайла.ВыбранныеФайлы;

ФайлСМС="";

Для Каждого ИмяФайла Из МассивФайлов Цикл

ФайлСМС=ИмяФайла;

конеццикла;

если ФайлСМС<>"" тогда

АдресХранилищаФайла = "";

Состояние("Перемещаю файл на сервер");

ПоместитьФайл(АдресХранилищаФайла, ФайлСМС, , Ложь, ЭтаФорма.УникальныйИдентификатор);

Состояние("Обрабатывается файл "+ФайлСМС);

таблицы=ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла);

иначе

сообщить("Файл не выбран");

конецесли;

КонецПроцедуры

Один комментарий 1c, html, table

JavaScript: удаление html тэгов из стороки

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

Задача: удалить из переменной все тэги вида <тэг>бла-бла</тэг>

Решение: воспользуемся регуляркой

txt="<a>Ссылка</a> А тут всё хорошо";
txt=txt.replace(/(<([^>]+)>)/ig, "");
console.log(txt)

txt="<a>Ссылка</a> А тут всё хорошо";

txt=txt.replace(/(<([^>]+)>)/ig, "");

console.log(txt)

Выведет в консоль только «А тут всё хорошо»

Оставить комментарий html, javascript, удаление тэгов

Bitrix: уязвимость CGI Generic HTML Injections

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

Уязвимость актуальна для версии v21.9 и ниже. Пока нет информации что исправлена!

Эксплуатация: при переходе по специально сформированной ссылке на сайт с битриксом, выводится произвольное содержимое и выполняется произвольный js код.

Проверка вшивости сайта:

https://ваш_сайт/catalog/?q=<"dqzsbr%20>

1	https://ваш_сайт/catalog/?q=<"dqzsbr%20>

Исправление: самый простой способ, до исправления от битрикса — поправить .httaccess, добавив строчки:

   
    RewriteCond %{QUERY_STRING} "
    RewriteRule ^.*$ - [F]
    RewriteCond %{QUERY_STRING} %22
    RewriteRule ^.*$ - [F]
    RewriteCond %{QUERY_STRING} %3C
    RewriteRule ^.*$ - [F]
    #RewriteCond %{QUERY_STRING} \<
    RewriteCond %{QUERY_STRING} %27
    RewriteRule ^.*$ - [F]
    RewriteCond %{QUERY_STRING} %3E
    RewriteRule ^.*$ - [F]

RewriteCond %{QUERY_STRING} "

RewriteRule ^.*$ - [F]

RewriteCond %{QUERY_STRING} %22

RewriteRule ^.*$ - [F]

RewriteCond %{QUERY_STRING} %3C

RewriteRule ^.*$ - [F]

#RewriteCond %{QUERY_STRING} \<

RewriteCond %{QUERY_STRING} %27

RewriteRule ^.*$ - [F]

RewriteCond %{QUERY_STRING} %3E

RewriteRule ^.*$ - [F]

Оставить комментарий bitrix, CGI, html, иньекция, уязвимость

1 2 3 »

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