Создание первых примеров веб-страниц с помощью HTML-документов в 1с 8.3
Только начал осваивать тему с созданием веб-страниц на платформе 1с 8.3. Вначале излагаю полностью рабочий код, а вопрос будет в конце.
1. Для создания в 1с 8.3 окна веб-страницы создаем реквизит "ПолеHTML" с типом "Строка", который нужно вывести на форму. В свойствах элемента "ПолеHTML" присваиваем ему вид "Поле HTML документа" (Скриншот 1).
2. Создаем общий макет или макет формы, например, с именем "МакетHTML_textDoc" и типом "Текстовый документ".
Заостряю внимание на том, что если использовать макет не типа "Текстовый документ", а типа "HTML-документ", то при выводе макета в элемент формы "ПолеHTML" вместо веб-странички будет отображаться код, введенный в макет.
3. В модуль макета "МакетHTML_textDoc" копируем следующий простой код:
<ht ml>
<head>
<st yle>
.paragraph {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<p class="paragraph">Моя <b>первая</b> веб-страница<i> в 1с!</i>
</body>
</html>
4. Для вывода веб-страницы в элемент формы "ПолеHTML" создаем команду "СформироватьВебСтраницу" со следующим кодом:
&НаСервере
Процедура СформироватьВебСтраницуНаСервере()
ОбработкаОбъект = РеквизитФормыВЗначение("Объект");
ПолеHTMLДокумента = ОбработкаОбъект.ПолучитьМакет("МакетHTML_textDoc").ПолучитьТекст();
Объект.ПолеHTMLДокумента = ПолеHTMLДокумента;
//Объект.ПолеHTMLДокумента = ПолучитьОбщийМакет("МакетHTML_text").ПолучитьТекст(); "Этот код
// используется вместо всего предыдущего данной процедуры, если используются данные общего макета"
КонецПроцедуры // ДействияФормыСформироватьНаСервере()
&НаКлиенте
Процедура СформироватьВебСтраницу(Команда)
СформироватьВебСтраницуНаСервере();
КонецПроцедуры
5. Сохраняем и открываем внешнюю обработку в пользовательском режиме, нажимаем кнопку команды "СформироватьВебСтраницу" и выводим веб-страницу (Скриншот 2).
6. В примере №2 пишем код с указанием стилей css в заголовке HTML- документа и подключением кода JavaScript из внешнего файла, например, "script_01.js":
<!DO CTYPE html>
<ht ml lang="en">
<head>
<met a charset="UTF-8">
<met a name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript>
<st yle>
#paragraph {
font-size: 30px;
color: blue;
}
.btn {
color: green;
font-size: 30px;
border: solid 3px #000;
border-radius: 10px;
background-color: #efefef;
}
</style>
</head>
<body>
<button class="btn">Скрыть строку</button>
<p id="paragraph">Скрываемая строка</p>
</body>
</html>
В данном примере путь файла JavaScript <sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript> каждый устанавливает и указывает себе самостоятельно.
7. В файле "script_01.js" размещаем следующий код:
document.querySelector('.btn').on click = function() {
document.querySelector('p').hidden = !document.querySelector('p').hidden
}
8. Сохраняем и открываем внешнюю обработку в пользовательском режиме, нажимаем кнопку команды "СформироватьВебСтраницу" и выводим веб-страницу (Скрншот 3).
9. При многократном нажатии кнопки "Скрыть строку" надпись, расположенная ниже, будет исчезать и появляться в соответствии с командой JavaScript, написанной в в файле "script_01.js".
В представленном выше коде нужно исправить написание некоторых тегов, например, <ht ml>,<st yle>, <!DO CTYPE html>, <ht ml lang="en">, <met a charset="UTF-8"> и другие, где данная платформа вопросов автоматически проставляет ненужные пробелы. Иначе код может не работать.
Вопрос состоит в следующем: 1. Если файл "script_01.js" получается подключить следующей инструкцией: <sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript>, то с файлом стилей css такой способ не работает (например, [*]. Как подключить файл стилей CSS с диска компьютера?
2. Если требуется подключить скрипты и стили, указанные в макете с типом "Текстовый документ", то как это сделать (например, через такую конструкцию <sc ript src="script_01"></sc ript>)? Хотя следующим образом работает, если указать инструкцию <sc ript>script_01</sc ript> в теле HTML-страницы, а в процедуре команды на сервере
script_1 = СокрЛП(ОбработкаОбъект.ПолучитьМакет("script_1").ПолучитьТекст());
ПолеHTMLДокумента = СтрЗаменить(ПолеHTMLДокумента,"script_1",script_1);
1. Для создания в 1с 8.3 окна веб-страницы создаем реквизит "ПолеHTML" с типом "Строка", который нужно вывести на форму. В свойствах элемента "ПолеHTML" присваиваем ему вид "Поле HTML документа" (Скриншот 1).
2. Создаем общий макет или макет формы, например, с именем "МакетHTML_textDoc" и типом "Текстовый документ".
Заостряю внимание на том, что если использовать макет не типа "Текстовый документ", а типа "HTML-документ", то при выводе макета в элемент формы "ПолеHTML" вместо веб-странички будет отображаться код, введенный в макет.
3. В модуль макета "МакетHTML_textDoc" копируем следующий простой код:
<ht ml>
<head>
<st yle>
.paragraph {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<p class="paragraph">Моя <b>первая</b> веб-страница<i> в 1с!</i>
</body>
</html>
4. Для вывода веб-страницы в элемент формы "ПолеHTML" создаем команду "СформироватьВебСтраницу" со следующим кодом:
&НаСервере
Процедура СформироватьВебСтраницуНаСервере()
ОбработкаОбъект = РеквизитФормыВЗначение("Объект");
ПолеHTMLДокумента = ОбработкаОбъект.ПолучитьМакет("МакетHTML_textDoc").ПолучитьТекст();
Объект.ПолеHTMLДокумента = ПолеHTMLДокумента;
//Объект.ПолеHTMLДокумента = ПолучитьОбщийМакет("МакетHTML_text").ПолучитьТекст(); "Этот код
// используется вместо всего предыдущего данной процедуры, если используются данные общего макета"
КонецПроцедуры // ДействияФормыСформироватьНаСервере()
&НаКлиенте
Процедура СформироватьВебСтраницу(Команда)
СформироватьВебСтраницуНаСервере();
КонецПроцедуры
5. Сохраняем и открываем внешнюю обработку в пользовательском режиме, нажимаем кнопку команды "СформироватьВебСтраницу" и выводим веб-страницу (Скриншот 2).
6. В примере №2 пишем код с указанием стилей css в заголовке HTML- документа и подключением кода JavaScript из внешнего файла, например, "script_01.js":
<!DO CTYPE html>
<ht ml lang="en">
<head>
<met a charset="UTF-8">
<met a name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript>
<st yle>
#paragraph {
font-size: 30px;
color: blue;
}
.btn {
color: green;
font-size: 30px;
border: solid 3px #000;
border-radius: 10px;
background-color: #efefef;
}
</style>
</head>
<body>
<button class="btn">Скрыть строку</button>
<p id="paragraph">Скрываемая строка</p>
</body>
</html>
В данном примере путь файла JavaScript <sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript> каждый устанавливает и указывает себе самостоятельно.
7. В файле "script_01.js" размещаем следующий код:
document.querySelector('.btn').on click = function() {
document.querySelector('p').hidden = !document.querySelector('p').hidden
}
8. Сохраняем и открываем внешнюю обработку в пользовательском режиме, нажимаем кнопку команды "СформироватьВебСтраницу" и выводим веб-страницу (Скрншот 3).
9. При многократном нажатии кнопки "Скрыть строку" надпись, расположенная ниже, будет исчезать и появляться в соответствии с командой JavaScript, написанной в в файле "script_01.js".
В представленном выше коде нужно исправить написание некоторых тегов, например, <ht ml>,<st yle>, <!DO CTYPE html>, <ht ml lang="en">, <met a charset="UTF-8"> и другие, где данная платформа вопросов автоматически проставляет ненужные пробелы. Иначе код может не работать.
Вопрос состоит в следующем: 1. Если файл "script_01.js" получается подключить следующей инструкцией: <sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript>, то с файлом стилей css такой способ не работает (например, [*]. Как подключить файл стилей CSS с диска компьютера?
2. Если требуется подключить скрипты и стили, указанные в макете с типом "Текстовый документ", то как это сделать (например, через такую конструкцию <sc ript src="script_01"></sc ript>)? Хотя следующим образом работает, если указать инструкцию <sc ript>script_01</sc ript> в теле HTML-страницы, а в процедуре команды на сервере
script_1 = СокрЛП(ОбработкаОбъект.ПолучитьМакет("script_1").ПолучитьТекст());
ПолеHTMLДокумента = СтрЗаменить(ПолеHTMLДокумента,"script_1",script_1);
Прикрепленные файлы:
По теме из базы знаний
Ответы
Подписаться на ответы
Инфостарт бот
Сортировка:
Древо развёрнутое
Свернуть все
(1)
Когда не разобрался как работает редактор html макета...
Попробуй еще раз.
Заостряю внимание на том, что если использовать макет не типа "Текстовый документ", а типа "HTML-документ", то при выводе макета в элемент формы "ПолеHTML" вместо веб-странички будет отображаться код, введенный в макет.
Когда не разобрался как работает редактор html макета...
Попробуй еще раз.
(1) Спасибо! Я встречал уже ваше замечание к другому моему комментарию. С одной ошибкой разобрался с вашей помощью. И ниже привожу тестирование работоспособности данной рекомендации. Но, с подключением скриптов пока еще нет. Из вашего второго сообщения пока не ясно, как это делать. Буду пробовать как только немножко появится время
(1) Поправляю первую свою ошибку по поводу использования макета с типом "Текстовый документ" вместо HTML-макета:
Т.е. для вставки в форме в поле HTML-документа нужно использовать все же макет с типом "HTML-документ", а не с типом "Текстовый документ". Хотя результат и получался с типом "Текстовый документ", но я не знал о наличии различных закладок в HTML-макете. В этом макете присутствуют 3 закладки внизу окна: "Редактирование", "Текст" и "Просмотр". На закладке "Текст" при первичном создании макета уже прописан следующий шаблон html-кода:
<ht ml><head>
<met a http-equiv="Content-Type" content="text/html; charset=utf-8">
[*]
<ba se href="/redirect.php?url=djhjb25maWc6Ly9iOTI4OTIzMy1hNmExLTQ1YjAtOWJiNS0yM2M3MGFk
</head>
<body>
</body></html>
Две другие закладки первоначально пустые.
В качестве теста на закладке "Текст" внес изменения в теле <head> добавлением своего тега <st yle>, а также внес код в тело тега <body>. Получился следующий код:
<ht ml><head>
<met a http-equiv="Content-Type" content="text/html; charset=utf-8">
[*]
<ba se href="/redirect.php?url=djhjb25maWc6Ly8wMTE5NWQ5Yi1jZWM5LTQ1MjYtOWRmZC0zMjNmMWEz
<st yle>
#paragraph {
font-size: 30px;
color: blue;
}
.btn {
color: green;
font-size: 30px;
border: solid 3px #000;
border-radius: 10px;
background-color: #efefef;
}
</style>
</head>
<body>
<button class="btn">Скрыть строку</button>
<p id="paragraph">Скрываемая строка</p>
<sc ript>
document.querySelector('.btn').on click = function() {
document.querySelector('p').hidden = !document.querySelector('p').hidden
}
</sc ript>
</body></html>
После этого на закладке "Просмотр" отобразилась веб-страница, показанная на прикрепленном скриншоте. При нажатии на кнопку расположенный ниже текст попеременно исчезает и снова отображается.
После этого в коде первого своего вопроса я заменил текстовый макет на HTML-макет и теперь веб-страница отображается нормально (а если я раньше код писал в первой закладке, то в пользовательском режиме выводился код html-документа, а не веб-страница.
Т.е. для вставки в форме в поле HTML-документа нужно использовать все же макет с типом "HTML-документ", а не с типом "Текстовый документ". Хотя результат и получался с типом "Текстовый документ", но я не знал о наличии различных закладок в HTML-макете. В этом макете присутствуют 3 закладки внизу окна: "Редактирование", "Текст" и "Просмотр". На закладке "Текст" при первичном создании макета уже прописан следующий шаблон html-кода:
<ht ml><head>
<met a http-equiv="Content-Type" content="text/html; charset=utf-8">
[*]
<ba se href="/redirect.php?url=djhjb25maWc6Ly9iOTI4OTIzMy1hNmExLTQ1YjAtOWJiNS0yM2M3MGFk
</head>
<body>
</body></html>
Две другие закладки первоначально пустые.
В качестве теста на закладке "Текст" внес изменения в теле <head> добавлением своего тега <st yle>, а также внес код в тело тега <body>. Получился следующий код:
<ht ml><head>
<met a http-equiv="Content-Type" content="text/html; charset=utf-8">
[*]
<ba se href="/redirect.php?url=djhjb25maWc6Ly8wMTE5NWQ5Yi1jZWM5LTQ1MjYtOWRmZC0zMjNmMWEz
<st yle>
#paragraph {
font-size: 30px;
color: blue;
}
.btn {
color: green;
font-size: 30px;
border: solid 3px #000;
border-radius: 10px;
background-color: #efefef;
}
</style>
</head>
<body>
<button class="btn">Скрыть строку</button>
<p id="paragraph">Скрываемая строка</p>
<sc ript>
document.querySelector('.btn').on click = function() {
document.querySelector('p').hidden = !document.querySelector('p').hidden
}
</sc ript>
</body></html>
После этого на закладке "Просмотр" отобразилась веб-страница, показанная на прикрепленном скриншоте. При нажатии на кнопку расположенный ниже текст попеременно исчезает и снова отображается.
После этого в коде первого своего вопроса я заменил текстовый макет на HTML-макет и теперь веб-страница отображается нормально (а если я раньше код писал в первой закладке, то в пользовательском режиме выводился код html-документа, а не веб-страница.
Прикрепленные файлы:
1. Создаете каталог "МоиВебСтраницЫ" (любые слова и выражения).
2. Создаете там html-файл.
3. Создаете там остальные файлы (js/css/...)
4. Вместо текста HTML в поле HTML-документа помещаете полное имя файла (file:///c:\mysuperhtmlproject\x.html)
5. Все.
2. Создаете там html-файл.
3. Создаете там остальные файлы (js/css/...)
4. Вместо текста HTML в поле HTML-документа помещаете полное имя файла (file:///c:\mysuperhtmlproject\x.html)
5. Все.
(7) HTML-документ у меня находится непосредственно в HTML-макете в 1с.
В этом макете рабочими вариантами являются:
a) установки стилей css, например, с помощью следующей конструкции в теле тега <head></head>:
<st yle>
#paragraph {
font-size: 30px;
color: blue;
}
</style>.
b) а также обращение к файлу Jav * aScript: <sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript>.
Но, следующие обращения к созданному файлу со стилями не работают (к сожалению, код при сохранении вопроса превращается в символы [*], поэтому код показан в прикрепленном скриншоте):
[*]
и
[*]
Не подскажете, что я делаю не так?
П.С. Файл "styles.css" содержит следующий текст:
#paragraph {
font-size: 30px;
color: blue;
}
.btn {
color: green;
font-size: 30px;
border: solid 3px #000;
border-radius: 10px;
background-color: #efefef;
}
Код html-макета в 1с (помимо содержимого <head>) следующий:
<body>
<button class="btn">Скрыть строку</button>
<p id="paragraph">Скрываемая строка</p>
</body>
В этом макете рабочими вариантами являются:
a) установки стилей css, например, с помощью следующей конструкции в теле тега <head></head>:
<st yle>
#paragraph {
font-size: 30px;
color: blue;
}
</style>.
b) а также обращение к файлу Jav * aScript: <sc ript src="file:///c:/xampp/htdocs/site_engine/script_01.js"></sc ript>.
Но, следующие обращения к созданному файлу со стилями не работают (к сожалению, код при сохранении вопроса превращается в символы [*], поэтому код показан в прикрепленном скриншоте):
[*]
и
[*]
Не подскажете, что я делаю не так?
П.С. Файл "styles.css" содержит следующий текст:
#paragraph {
font-size: 30px;
color: blue;
}
.btn {
color: green;
font-size: 30px;
border: solid 3px #000;
border-radius: 10px;
background-color: #efefef;
}
Код html-макета в 1с (помимо содержимого <head>) следующий:
<body>
<button class="btn">Скрыть строку</button>
<p id="paragraph">Скрываемая строка</p>
</body>
Прикрепленные файлы:
Для получения уведомлений об ответах подключите телеграм бот:
Инфостарт бот