Как встроить JavaScript и JSON-данные в HTML-файл для работы с Яндекс Картами?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

При работе с веб-компонентами, например, с Яндекс Картами, внутри среды, которая не позволяет создавать отдельные файлы для JavaScript и JSON (как это часто бывает при отображении HTML-контента в полях 1С), возникает задача встраивания всего необходимого содержимого непосредственно в один HTML-файл. Рассмотрим, как мы можем это сделать, опираясь на пример с Яндекс Картами, где у нас есть файл скрипта object_manager.js и файл данных data.json.

1. Встраивание JavaScript (object_manager.js)

С файлами JavaScript процесс встраивания довольно прямолинеен. Мы просто копируем всё содержимое файла object_manager.js и помещаем его внутрь тегов <script> и </script> в нашем HTML-файле.

Куда поместить скрипт?

  1. В секции <head>: Если мы размещаем скрипт в этой секции, рекомендуется использовать атрибуты defer или async, чтобы не блокировать рендеринг страницы. Атрибут defer задерживает выполнение скрипта до полной загрузки HTML-документа, сохраняя порядок выполнения скриптов. Атрибут async позволяет загружать и выполнять скрипт асинхронно, не блокируя рендеринг и другие скрипты, но порядок выполнения при этом не гарантируется.

  2. Перед закрывающим тегом </body>: Этот подход часто является предпочтительным для улучшения производительности загрузки страницы. Скрипты, расположенные в конце <body>, начинают выполняться только после того, как браузер уже загрузил и отрисовал основное содержимое страницы, что предотвращает блокировку отображения.

Пример встраивания JavaScript:

Предположим, у нас есть содержимое файла object_manager.js. Мы вставим его следующим образом:


<!DOCTYPE html>
<html>
<head>
    <title>Яндекс Карты со встроенным JS</title>
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script>
        // Здесь мы копируем и вставляем весь текст из файла object_manager.js
        // ВНИМАНИЕ: Это пример, реальное содержимое object_manager.js может быть гораздо больше
        ymaps.ready(init);

        function init() {
            var myMap = new ymaps.Map('map', {
                center: [55.76, 37.64],
                zoom: 10
            }, {
                searchControlProvider: 'yandex#search'
            });

            var objectManager = new ymaps.ObjectManager({
                // Отключим наведение на кластеры, чтобы при наведении на маркеры был виден только балун маркера.
                clusterHoverFeature: false,
                // Отключим клик по кластерам
                clusterClickBehavior: 'none'
            });

            myMap.geoObjects.add(objectManager);

            // ... Остальной код из object_manager.js будет здесь ...
            // Например, инициализация и добавление данных, которые мы рассмотрим дальше
        }
    </script>

</body>
</html>

2. Встраивание JSON (data.json)

Встраивание JSON-данных требует немного больше внимания, так как JSON сам по себе не является исполняемым кодом JavaScript, но содержит структурированные данные. Мы рассмотрим два основных подхода.

Метод 1: Использование тега <script type="application/json">

Этот метод является рекомендуемым и наиболее чистым способом встроить JSON. Мы помещаем содержимое файла data.json внутрь тега <script>, но указываем специальный атрибут type="application/json" и уникальный id. Браузер не будет пытаться выполнить этот скрипт как JavaScript, а будет рассматривать его как блок данных, доступный через DOM.

Пример встраивания JSON с type="application/json":


<script type="application/json" id="yandexMapData">
{
  "type": "FeatureCollection",
  "features": [
    {
      "id": 0,
      "type": "Feature",
      "properties": {
        "balloonContent": "Содержимое балуна <strong>Метка 1</strong>",
        "clusterCaption": "Очень длинный, но на самом деле короткий капшн 1",
        "hintContent": "Хинт метки 1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [55.751244, 37.618423]
      }
    },
    {
      "id": 1,
      "type": "Feature",
      "properties": {
        "balloonContent": "Содержимое балуна <strong>Метка 2</strong>",
        "clusterCaption": "Очень длинный, но на самом деле короткий капшн 2",
        "hintContent": "Хинт метки 2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [55.751244, 37.618423]
      }
    }
  ]
}
</script>

Метод 2: Встраивание JSON как глобальной JavaScript-переменной

Мы также можем определить JSON-данные напрямую как JavaScript-объект в обычном теге <script>. Этот метод проще для небольших объемов данных, поскольку не требует дополнительного парсинга, но для больших файлов JSON он может ухудшить читаемость HTML-кода и затруднить его обслуживание.

Пример встраивания JSON как глобальной переменной:


<script>
  var yandexMapData = {
    "type": "FeatureCollection",
    "features": [
      {
        "id": 0,
        "type": "Feature",
        "properties": {
          "balloonContent": "Содержимое балуна <strong>Метка 1</strong>",
          "clusterCaption": "Очень длинный, но на самом деле короткий капшн 1",
          "hintContent": "Хинт метки 1"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [55.751244, 37.618423]
        }
      },
      {
        "id": 1,
        "type": "Feature",
        "properties": {
          "balloonContent": "Содержимое балуна <strong>Метка 2</strong>",
          "clusterCaption": "Очень длинный, но на самом деле короткий капшн 2",
          "hintContent": "Хинт метки 2"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [55.751244, 37.618423]
        }
      }
    ]
  };
</script>

3. Как получить доступ к встроенному JSON и заменить $.ajax

После того как JSON-данные встроены непосредственно в HTML, нам больше не требуется выполнять асинхронный AJAX-запрос для их загрузки, поскольку данные уже находятся на странице. Мы заменим вызов $.ajax({ url: "data.json" }).done(...) на прямое обращение к встроенным данным.

Замена AJAX-запроса при использовании <script type="application/json">

Если мы использовали тег <script type="application/json">, то для получения данных нам потребуется выполнить следующие шаги:

  1. Получить ссылку на HTML-элемент <script> по его уникальному id.

  2. Извлечь текстовое содержимое этого элемента.

  3. Распарсить полученную JSON-строку с помощью функции JSON.parse() для преобразования её в полноценный JavaScript-объект.

Заменим исходный код:


$.ajax({
    url: "data.json"
}).done(function(data) {
    objectManager.add(data);
});

На следующий:


var jsonScriptTag = document.getElementById('yandexMapData'); // Получаем тег по его id
var jsonDataString = jsonScriptTag.textContent; // Получаем текстовое содержимое
var data = JSON.parse(jsonDataString); // Преобразуем JSON-строку в JavaScript-объект

objectManager.add(data); // Используем полученные данные для objectManager

Использование свойства textContent (вместо innerHTML) предпочтительнее для получения чистого текста, так как это позволяет избежать возможных проблем с парсингом HTML внутри скрипта и улучшает производительность.

Замена AJAX-запроса при использовании JSON как глобальной JavaScript-переменной

Если мы встроили JSON-данные как глобальную JavaScript-переменную (например, yandexMapData), то они уже являются полноценным JavaScript-объектом и доступны напрямую по имени переменной.

Заменим исходный код:


$.ajax({
    url: "data.json"
}).done(function(data) {
    objectManager.add(data);
});

На следующий, более простой вызов:


// yandexMapData уже является JavaScript-объектом
objectManager.add(yandexMapData);

Таким образом, мы успешно встроили JavaScript и JSON-данные в один HTML-файл и адаптировали код для их прямого использования без выполнения внешних запросов. Это решение идеально подходит для сценариев, где необходимо создать самодостаточный HTML-документ, например, для отображения встраиваемых веб-элементов в 1С.

← На главную