Внешний JavaScript

Need help
1

Привет
Подскажите, можно ли как-то в веб приложение засунуть ссылку на внешний javascript?
Мы хотим чтобы в блоке HEAD нашего веб приложения был подключен скрипт

2

Можно использовать элемент Embed HTML. В нем прописывается код HTML в чистом виде, соответственно можно и JS добавить. Вставлять желательно в layout, чтобы гарантированно был на страницах.

Есть еще вариант запуска скрипта на выполнение в БП блоком Execute JS

1 Like
3

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

1 Like
4

Спасибо.
Попробую, проверю

5

@OlegSotnikov @Basil_K
Попробовали сделать через Embed HTML, но видно скрипт во фрейме.
Есть ли пример взаимодействия с Telegram WebApp через JS?
Не понимаем как получить данные из Telegram и прокидывать дальше во фронт/бэк.

И может уже появилась настройка для подключения кастомных тэгов в HEAD ?

image
image1884×737 171 KB

1 Like
6

@OlegSotnikov @Basil_K подскажите, появились ли новые настройки страниц, лейаутов и самого веб приложения?

После тестов с Embed HTML выявили, что создается новый фрейм и работа скрипта идет внутри этого созданного фрейма. А необходимо скрипт распространять на всю страницу (пробовали использовать parent document, но без изменений)

7

Ожидаем настройки в течении следующих нескольких дней. Мы напишем как только они появится в продакшене.

1 Like
8

@OlegSotnikov понимаю, что возможно еще не внедрили данную настройку, но спрошу на всякий, может уже выпустили обновление?

И еще хотел уточнить, может есть еще какой-то вариант, как вызывать внешний javascript нв всю страницу (не в отдельном фрейме (а то он работает в рамках этого созданного фрейма)). ?
Сильно зависит запуск MVP от данной функции, хотим пробрасывать авторизацию из телеграма (telegram_id).

9

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

Как запасной вариант попробовать через Execute JS Code блок

image
image426×318 12.3 KB

10

@OlegSotnikov
Попробовали. Есть несколько вопросов и замечаний: (делал в настройках приложения)

  1. Когда вставляешь код в “Script Tags” то пишет что код не валидный. Пришлось повозиться, чтобы понять что ему не нравится закрывающий . Без него работает, но работают пока только src на скрипт.
    Сам скрипт все равно с ошибкой, не понятно почему и нигде не написан пример как писать правильный запрос
    Пример скрипта, который вставляем:
<script>
window.onload = function() {
    console.log("Привет, мир!");
};
</script>

image
image593×236 11 KB

image
image522×142 7.22 KB

  1. ОЧЕНЬ ВАЖНО. Скрипты, которые удалось подключить не отрабатывают (вообще никакие, пробовали разные варианты, пытались не один раз)
  2. При переключении вкладок меню (навигатор хэдер) происходит задвоение подключенных скриптов
    telegram-cloud-photo-size-2-5328232485370325947-y
    telegram-cloud-photo-size-2-5328232485370325947-y917×504 156 KB
  3. Пока все это писал, все скрипты почему то стерлись и параметр “Script Tags” обнулился и скрипты исчезли. Хотя на странице остались
    image
    image565×142 4.52 KB
11

Выкатываем фиксы. Часть уже исправлена. Дублирующиеся тэги сейчас изучаем.

12

@OlegSotnikov скрипты начали работать, спасибо.
Ожидаем фикс с дублированием

13

@OlegSotnikov подскажите пожалуйста, каким образом можно обрабатывать возвращаемые данные с бэка через подключенный внешний Javascript?
То есть, есть ли возможность через БП работать с данными, возвращаемыми через наш JS?

14

Если код запущен через Execute JS то там есть в комменте как нужно вернуть данные чтобы поймать со стороны приложения:

image
image645×685 28.5 KB

Кастомный код в конце должен вызвать функцию _return и передать параметры:
_return(‘my data’, true, null) - корректно возвращены данные, Success=true
_return(null, false, ‘There is an error: some description’) - вернуть ошибку

15

Если вы работаете с внешним подключаемым файлом, я бы передавал данные записывая в переменную Window, и потом бы читал через Execute JS. Но не безопасно.

Как вариант можем добавить специальную переменную на уровне Window и триггер на ее изменение. Может быть у @skripov есть опыт реализации.

1 Like
16

Если вы делаете интеграцию с Telegram Mini Apps, то у нас там есть прогресс и на следующей неделе может быть отдадим модуль веба с интеграцией.

1 Like
17

@OlegSotnikov Да, делаем интеграцию с miniapps.
Тогда буду ждать новостей, спасибо!

PS было бы полезно еще добавить описание, как работать с этим модулем

18

Вам может пригодиться инструкция как сделать верификацию пользователя в миниапс на бэкенде - Верификация пользователя в Telegram MiniApps — NoCode Wiki

1 Like
19

@OlegSotnikov пока нет модуля интеграций веб с miniapp, пытаемся взять user_id telegram посредствам Execute JS.

Запускаем скрипт, но не можем понять как его обработать, как обработать ответ. Ощущение, что нет возможности распарсить

Запускаем Execute JS, видим что succses, но return не обрабатывается
Сам скрипт

$(document).ready(function () {
    // Init Telegram Web App
    Telegram.WebApp.ready();

    // Save user information
    const user_1 = Telegram.WebApp.initDataUnsafe.user;
    if (user_1) {
        _return(user_1.id, true, null);
    } else {
        _return(null, false, ‘There is an error: some description’);
    }
});

а return должен выдавать это

{'user': {'id': 00000000, 'first_name': 'Ivan', 'last_name': 'Ivanov', 'language_code': 'ru', 'is_premium': True, 'allows_write_to_pm': True, 'photo_url': 'https://t.me/i/userpic/320/ixYCxXl7Kjd4X1hT-XiQ9CsdH5bflnjp0NaIN1eeocs.svg'}}

Вот БП

image
image925×311 34.2 KB

20

@OlegSotnikov подскажите пжл, может есть понимание как нужно корректно обрабатывать return ?