Мухи отдельно, котлеты отдельно. Еще раз про HTML и JavaScript

09.10.19

Разработка - Работа с интерфейсом

Это еще одна статья про документ HTML и JavaScript. Уклон сделан на организацию хранения HTML документа и скриптов а так же на подключение скриптов к документу.

Скачать файлы

Наименование Файл Версия Размер
Мухи отдельно, котлеты отдельно. Еще раз про HTML и JavaScript.:
.epf 11,39Kb
16
.epf 1.2 11,39Kb 16 Скачать

Встала передо мной задача использовать в обработке HTML документ к которому подключена здоровенная библиотека на JavaScript. Задумался я об удобном размещении в обработке HTML разметки и скриптов а так же об удобном встраивании скриптов в документ перед его выполнением. В результате было найдено несколько достойных решений:

Размещение HTML документа и скриптов в макетах обработке

Было принято решение HTML разметку и скрипты хранить в макетах обработки. Для каждого документа HTML и для каждого скрипта или библиотеки скриптов свой макет. Ниже пример такой организации:

На скриншоте находится три макета. 

HTML_DOC - макет в котором находится документ HTML. Тип макета HTML документ

script_01, script_02 - макеты в которых находятся скрипты на JavaScript. Тип макета Текстовый документ.

Устройство документа HTML для удобного подключения скриптов

Вначале покажу содержимое HTML документа моего примера

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="__STYLE__" rel="stylesheet" type="text/css">
    <meta name="GENERATOR" content="MSHTML 11.00.9600.19003">
    <base href="/redirect.php?url=djhjb25maWc6Ly9jMWQzZTdkMi03MTUwLTQ3ZmMtOGRjYy0xNThlMjBlNTE5OTUvbWRvYmplY3QvaWQ2MTI5YzI1Ni1iMWVjLTRlMTYtOTUxMi0xNDljNjhkMzdjYWUvOGViNGZhZDEtMWZhNi00MDNlLTk3MGYtMmMxMmRiYjQzZTIz">
    <script src="script_01"></script>
    <script src="script_02"></script>
</head>

<body>
    <div>
        <p>
            <h1>TEST_JS</h1>
        </p>
    </div>
    <div id="block1">
        <p>Текст скрываемого блока 1</p>
    </div>
    <div id="block2">
        <p>Текст скрываемого блока 2</p>
    </div>
</body>

</html>

В секции <head> объявлено подключение двух скриптов с помощью конструкции <script src="script_ХХ"></script> Документ считает, что скрипты находятся в ресурсах "script_01" и "script_02". Количество подключаемых скриптов не ограничено, два взято для примера.

Я воспользовался следующими возможностями документа:

  • подключать можно много скриптов, обрамляя каждый конструкцией <script></script>
  • скрипт может находится на внешнем ресурсе и документ его самостоятельно импортирует при построении дерева
  • платформа 1С предоставляет инструменты для манипулирования атрибутами документа, поэтому "фейковые" пути к скриптам, типа script_01 или script_02 я смогу подменить на истинные пути реальных файлов.

Перемещение скриптов в папку на локальном диске

Напомню, что скрипты у нас располагаются в текстовом макете обработки. Браузер 1С при исполнении HTML документа может импортировать скрипт с внешнего ресурса, в том числе из папки на локальном диске. Код копирования из макета на диск прост: Здесь свойство ОО это объект обработка.

сПутьКФайлу = ПолучитьИмяВременногоФайла("js");
макетJS = ОО.ПолучитьМакет(сИмяМакетаСкрипта);
макетJS.Записать(сПутьКФайлу);

Путь к файлу как URL

Мы скопировали файл скрипта на диск и он располагается, например по пути c:\temp\script_01.js Браузер 1С не сможет импортировать скрипт если путь к ресурсу указать как путь Windows. То есть, вот так работать не будет:

<script src="c:\temp\script_01.js"></script>

Проблема в пути, его нужно указывать как URL, добавляя префикс file:///. Вот так будет все в порядке:

<script src="file:///c:/temp/script_01.js"></script>

сделаем функцию преобразования локального пути в URL

&НаКлиентеНаСервереБезКонтекста
Функция ПутьКФайлуКакURL(сПуть)
    Возврат "file:///"+СокрЛП(СтрЗаменить(сПуть,"\","/"));
КонецФункции

Подмена в HTML документе "фейковых путей на локальные"

Последний шаг нашего плана изменить документ HTML и подставить настоящие пути к ресурсам вместо "фейковых". В начале получим коллекцию элементов <script>. Помните, в документе их может быть несколько?

элементыScript = документHTML.ПолучитьЭлементыПоИмени("script");
Если элементыScript.Количество() = 0 Тогда
    бВыполненоБезОшибок = Ложь;
    Возврат бВыполненоБезОшибок;
КонецЕсли;

Теперь для каждого элемента <script> нашего документа изменим значение атрибута "src" указав правильный путь к ресурсу. Я применил одну военную хитрость, назвал "фейковый" ресурс в исходном документе и макет скрипта одинаково и таким образом по названию макета я понимаю в какой элемент коллекции подставить правильный ресурс.

Для каждого элементScript Из элементыScript Цикл
    Если элементScript.Источник = сИмяМакетаСкрипта Тогда
        элементScript.УстановитьАтрибут("src", ПутьКФайлуКакURL(сПутьКФайлу));
        бВыполненоБезОшибок = Истина;
        Возврат бВыполненоБезОшибок;
    КонецЕсли;
КонецЦикла;

Выгрузка HTML документа в текст разметки

И самый последний шаг. Выгрузим наш документ в текст и передадим этот текст в элемент формы с типом "Поле HTML документа". Тут просто

&НаКлиентеНаСервереБезКонтекста
Функция ТекстHTMLДокумента(Знач документHTML, сТекстДокументаHTML)
	Перем бВыполненоБезОшибок, ЗаписьDOM, ЗаписьHTML;
	
	ЗаписьDOM = Новый ЗаписьDOM();
	ЗаписьHTML = Новый ЗаписьHTML();
	ЗаписьHTML.УстановитьСтроку();
	Попытка
		ЗаписьDOM.Записать(документHTML, ЗаписьHTML);
		сТекстДокументаHTML = ЗаписьHTML.Закрыть();
		бВыполненоБезОшибок = Истина;
	Исключение
		сТекстДокументаHTML = "";
	    бВыполненоБезОшибок = Ложь;
	КонецПопытки;
	
	Возврат бВыполненоБезОшибок;
КонецФункции

Итог

Подведем итог. Изначально HTML документ и скрипты существовали как макеты обработки. Скрипты мы сохранили как файлы на локальном диске. В HTML документе изменили элементы <script>, указав в них реальные пути до скриптов. Документ выгрузили в текст и передали его браузеру 1С в элементе формы "Поле HTML документа". Ура, все работает.

Дополнение от 09.10.2019

Известно, что начиная с версии платформы 8.3.14 в качестве веб движка используется WebKit. Теперь для DOM не доступно свойство parentWindow, через которое мы раньше вызывали скрипт. Для новых версий платформы 1С Предприятие нужно использовать свойство defaultView. В новой версии обработки, текст метода, который вызывает скрипт переписан так:

Если Лев(Элементы.HTML_Fild.ИнформацияПрограммыПросмотра, 11) = "Mozilla/5.0" Тогда
	Элементы.HTML_Fild.Документ.defaultView.display_div(сИДБлока);
Иначе
	Элементы.HTML_Fild.Документ.parentWindow.display_div(сИДБлока);
КонецЕсли;

То есть, я пытаюсь определить, какой движок используется платформой и после этого выбираю свойство DOM parentWindow или defaultView.

 

Обработка протестирована на платформе версии 8.3.15

 

К статье приложена новая версия обработки от 09.10.2019

Так же этот проект можно найти на GitHub

обработка javascript HTML макеты

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61795    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54402    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16697    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10736    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9614    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3665    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12080    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Steelvan 302 09.06.18 11:30 Сейчас в теме
Фейковые = фальшивые, ложные
Yakud3a; Lyolik; Soloist; ltfriend; +4 1 Ответить
3. webester 26 11.06.18 08:54 Сейчас в теме
(1)контекст данного слова предполагает именно слово "фейковый" фальшивый и ложный здесь неуместны.И да не забудьте прицепиться к слову "контекст".
TreeDogNight; +1 1 Ответить
6. пользователь 22.06.18 11:03
Сообщение было скрыто модератором.
...
7. webester 26 22.06.18 14:44 Сейчас в теме
(6)
Завтра следующая обезьяна

Просто интересно кого ты назвал обезьяной? Меня или ТС? Давно заметил, оскорбления - отличительная черта "патриотов".

(6)
и вы будете говорить что именно оно подходит для выражения мысли

Не вижу в этом ничего плохого. У нас много слов из других языков и все хорошо, никто не умер.

(6)
русский великий и могучий такие как вы превращают в русско-английский суржик, никакого у вас нет самоуважения

В удобный для использования. Если слово не будет удобным, оно умрет само, если будет удобным, сделает великий и могучий еще более богатым.
Так и не услышал, что делать, со словами "контекст", "скрипт", "браузер", дальше лень искать, легко найти десяток почти в каждой статье. Нужен сервис который будет искать пендоские слова и заменять их на наши исконные родимые. Вот тогда заживем. Я гарантирую это.
8. Steelvan 302 23.06.18 18:24 Сейчас в теме
(7)
Для вашего развития будет полезно узнать, что даже слова "Идиот" или "Дурачок" являются нормальными медицинскими терминами, которые отражают факт сути. Собственно "Обезьяна" в контексте (лат.) моего сообщения относится к этому в полной мере. Одна обезьяна сказала, другая понесла, третья подхватила.

Давно заметил, оскорбления - отличительная черта "патриотов".

Сугубо женская черта: чуть что, сразу надо сделать вид что тебя оскорбляют.

Не вижу в этом ничего плохого. У нас много слов из других языков и все хорошо, никто не умер.

Я понял ваше мнение, что общаться на русско-английском суржике это хорошо. С вами все ясно.

Мое мнение, что общаться на литературном русском это хорошо. Другое дело, что у малого количества людей есть для этого сила воли, особенно это зависит от окружения.
Я слово "браузер" не использую, т.к. есть куда более русское слово "обозреватель".
Контекст, во-первых, это латинское слово, а во вторых, это литературное слово.
Аналогично "Скрипт" = сценарий.

Нужен сервис который будет искать пендоские слова и заменять их на наши исконные родимые.

В ваших мыслях встречаются здравые. Это похвально.
4. PerlAmutor 129 12.06.18 17:25 Сейчас в теме
Альтернативные варианты:
- сразу поместить код JavaScript в HTML;
- разместить код JavaScript в текстовых макетах, но вместо того, чтобы сохранять во временные файлы - поместить код скриптов через СтрЗаменить() в HTML;
svilsa; Lyolik; +2 Ответить
5. infosoft-v 871 12.06.18 21:08 Сейчас в теме
(4) Искал решение, как избежать обоих предложенных вами вариантов. Результат поиска данная статья.
9. s_vidyakin 63 27.07.18 14:41 Сейчас в теме
(5) Не работает обработка.
У меня КаталогВременныхФайлов() возвращает путь на сервере и сохраненные там файлы не видятся в html, выдается ошибка что функция не обнаружена
10. s_vidyakin 63 27.07.18 15:50 Сейчас в теме
(5) При работе на сервере не работает - пришлось доработать - сначала запрашивать ресурсы, получать на клиенте файлы и передавать созданные пути обратно на сервер в процедуру формирования HTML и подставлять их там
11. infosoft-v 871 27.07.18 17:22 Сейчас в теме
(10) Спасибо за уточнение. Это правда, я на сервере не тестировал.
12. GSA3D 07.12.19 17:37 Сейчас в теме
Что-то в webkit не работают внешние скрипты, расположенные локально. Фокус с "file:///" не помогает, относительные пути тоже не работают.
13. infosoft-v 871 07.12.19 18:42 Сейчас в теме
(12) Добрый день. На какой версии платформы проверяли?
14. GSA3D 08.12.19 11:50 Сейчас в теме
(13) 8.3.16.1030. 8.3.14 тоже не загружалось. Может конечно это у меня что-то с локальными настройками безопасности, не знаю куда копать. У меня в одном из решений всё построено на leaflet, который с ie довольно сильно тормозит. А не webkit вообще не работает.
15. infosoft-v 871 18.12.19 10:47 Сейчас в теме
(14) Если вопрос еще актуален, то пришлите пожалуйста текст итогового HTML документа.
Файл - Сохранить как - Файл с расширением html.
Прикрепленные файлы:
16. GSA3D 20.12.19 17:31 Сейчас в теме
(15)
<ht ml>
<head>
	<met a charset="utf-8" />
	<met a name="viewport" content="width=device-width, initial-scale=1.0">
	
    [*]
    <sc ript type="text/javascript" src="путькскриптам/leaflet/leaflet.js"></sc ript>

</head>
<body>

<div id="mapid" style="width: 100%;"></div>
<sc ript>

	var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gi­fQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data © OpenStreetMap contributors, ' +
			'CC-BY-SA, ' +
			'Imagery © Mapbox',
		id: 'mapbox/streets-v11'
	}).addTo(mymap);

</sc ript>

</body>
</html>
Показать


Выдает хаотичным образом расставленные тайлы карты, которые плодятся при любой попытке взаимодействия.
Прикрепленные файлы:
18. GSA3D 10.01.20 10:37 Сейчас в теме
(15) Решил вопрос! Оказалось, что для WebKit нужно прописывать кодировку внешних скриптов и стилей в тэгах (charset="utf-8")
19. pvvking 10.01.20 13:07 Сейчас в теме
(18) Подскажите по подробней. Столкнулся с такой же проблемой.
20. GSA3D 10.01.20 15:35 Сейчас в теме
(19) Везде где есть ссылки на внешние скрипты и стили:
[*] <sc ript src="" charset="utf-8">
Neitron4ik; +1 Ответить
22. infosoft-v 871 11.01.20 12:07 Сейчас в теме
(20) Добрый день.
В каком редакторе вы пишите JS?
На Stackoverflow видел сообщение, что при сохранении скрипта в кодировке UTF-8, его нужно сохранять без маркера последовательности байтов BOM. Блокнот Windows так не умеет.
23. GSA3D 13.01.20 10:58 Сейчас в теме
(22) PHPStorm. Внешние скрипты вообще не трогал, скопировал leaflet и аддоны как они были в релизах. Насколько я понял, webKit пытается прочитать скрипты в той кодировке, которая указана в системе, поэтому при загрузке нужно указывать конкретную кодировку.
17. poar 01.01.20 14:36 Сейчас в теме
Здравствуйте.

Подключение скриптов прошло успешно, однако при вызове через defaultView возникает ошибка "Метод объекта не обнаружен (display_div)".

Вашу обработку скачал, потому что ни как не мог добиться вызова скрипта на js. И здесь опять столкнулся со своей проблемой.

Платформа: (8.3.15.1700)
21. infosoft-v 871 11.01.20 12:01 Сейчас в теме
(17) Добрый день.
Вы платформу запускаете под ОС Windows?
Если вы не модифицировали текст моей обработки, то покажите значение выражения
Элементы.HTML_Fild.ИнформацияПрограммыПросмотра

полученного при отладке (Модуль формы HTML_Form, метод Выполнить_display_div строка кода 54)
Оставьте свое сообщение