Handlebars

Для создания интерфейса задания в поле html на странице проекта можно использовать:

Библиотеки для использования Handlebars и дополнительных компонентов подключены по умолчанию при создании проекта.

Поле для ввода строки

Чтобы добавить в задание поле для ввода строки, используйте компонент {{field type="input" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type="input" name="result" placeholder="Введите слово" validation-show="right-center"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: input — поле для ввода строки.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

value

Строка, которая записывается в файл с выходными данными по умолчанию.

нет

нет

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

160-170 пикселей (зависит от браузера и размера шрифта)

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

size

Размер поля.

Допустимые значения: "S", "M", "L", "XL".

нет

"L"

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

placeholder

Текст-подсказка, отображаемый в пустом поле ввода.

нет

нет

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_input"

В описании выходных данных добавьте поле с типом string. Например:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Поле для ввода текста

Чтобы добавить в задание поле для ввода многострочного текста, используйте компонент {{field type="textarea" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type="textarea" name="result" width="270px" rows=5}} 
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: textarea — поле для ввода многострочного текста.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

value

Текст, который записывается в файл с выходными данными по умолчанию.

нет

нет

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

size

Размер поля.

Допустимые значения: "M", "L".

нет

"L"

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

rows

Высота текстового поля (количество строк, которые отображаются без прокрутки).

Пример: {{field type="textarea" name="result" width="270px" rows=5}}

нет

3

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

resize

Возможность для пользователя изменять размер поля:

  • resize="vertical" — возможность изменять высоту.

  • resize="horizontal" — возможность изменять ширину.

  • resize="both" — возможность изменять высоту и ширину.

нет

нет

placeholder

Текст-подсказка, отображаемый в пустом поле ввода.

нет

нет

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_textarea"

В описании выходных данных добавьте поле с типом string. Например:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Поле для ввода строки с саджестом

Саджест — это текстовые подсказки, которые отображаются, когда пользователь устанавливает курсор в поле ввода строки. Чтобы добавить в задание поле с подсказками:

  1. Задайте массив строчек-подсказок в JS-коде (метод getTemplateData), чтобы включить его в набор входных данных проекта. Пример:

    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data. < название массива > = ['строка 1', 'строка 2', ...
            'строка n'
        ];
        return data;
    }
    Пример
    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France'];
        return data;
    }
  2. Добавьте в HTML-код компонент {{field type="suggest" name="<идентификатор поля>" source=<название массива>}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Пример:

    {{field type="suggest" name="result" source=countries allowCustomInput=true}}
    Полный список параметров

    Параметр

    Описание

    Обязательность

    Значение по умолчанию

    type

    Тип поля: suggest — поле для ввода строки с подсказками.

    да

    нет

    name

    Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

    да

    нет

    source

    Название массива строк с подсказками. Например: source=countries. Массив определяется в JS-коде проекта (метод getTemplateData).

    да

    нет

    allowCustomInput

    Возможность для пользователя игнорировать подсказки и ввести свою строку.

    нет

    false

    validation-show

    Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

    Допустимые значения:

    • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

    • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

    • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

    • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

    • Не показывать сообщение ("false").

    нет

    "top-left"

    placeholder

    Текст, отображаемый в пустом поле ввода.

    Примечание.

    Если указано значение value, в поле ввода отображается value, а не placeholder.

    нет

    нет

    hotkey

    Горячая клавиша для наведения фокуса на поле.

    нет

    нет

    value

    Значение, которое нужно записать в ответы, если пользователь не заполнил поле.

    Примечание.

    Значение value отображается в пустом поле ввода вместо placeholder.

    нет

    нет

    class

    CSS-класс для поля. Например: class="mytask_field".

    нет

    ".field" ".field_type_suggest"

Переключатель

Чтобы вставить в задание переключатель, используйте компонент {{field type="radio" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например (переключатель из двух элементов):

{{field type="radio" name="result" label="Да" value="Yes" hotkey="1"}}
{{field type="radio" name="result" label="Нет" value="No" hotkey="2"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: radio — переключатель.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

label

Название элемента в интерфейсе. Например: label="Да".

нет

нет

value

Передаваемое значение (записывается в файл с выходными данными).

нет

нет

hotkey

Горячая клавиша для выбора значения.

нет

нет

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

checked

Состояние переключателя при отображении страницы:

  • checked=true — включен.

  • checked=false — выключен.

нет

false

size

Размер поля.

Допустимые значения: "M", "L".

нет

"L"

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_radio"

В описании выходных данных добавьте поле с типом string. Например:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Флажок

Чтобы вставить в задание флажок, используйте компонент {{field type="checkbox" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например (набор из трех флажков):
{{field type="checkbox" name="red" label="красный" hotkey="1"}}
{{field type="checkbox" name="green" label="зелёный" hotkey="2"}}
{{field type="checkbox" name="yellow" label="желтый" hotkey="3"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: checkbox — флажок.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

label

Название элемента в интерфейсе. Например: label="Да".

нет

нет

hotkey

Горячая клавиша для выбора значения.

нет

нет

value

Передаваемое значение (записывается в файл с выходными данными).

Допустимые значения: true, false.

нет

false

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

checked

Состояние флажка при отображении страницы:

  • checked=true — установлен.

  • checked=false — снят.

нет

false

size

Размер поля.

Допустимые значения: "M", "L".

нет

"L"

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_checkbox"

В описании выходных данных добавьте поле с типом boolean. Например:
{
  "red": {
        "type": "boolean",
        "required": true
            }
}

Выпадающий список

Чтобы добавить в задание выпадающий список, используйте компонент {{#field type="select" name="<идентификатор поля>"}}... {{/field}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Элементы выпадающего списка создаются с помощью вложенного выражения {{select_item}} . Например:

{{#field type="select" name="colour" placeholder="Выберите цвет" width="200px"}}
  {{select_item value="red" text="Красный"}}
  {{select_item value="green" text="Зеленый"}}
{{/field}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: select — выпадающий список.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

placeholder

Название выпадающего списка в интерфейсе.

нет

нет

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

size

Размер поля.

Допустимые значения: "S", "M", "L".

нет

"L"

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_select"

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

mode

Направление, в котором раскрывается список:

  • mode="dropdown" — вниз.

  • mode="dropup" — вверх.

нет

"dropdown"

value

Текст, который записывается в файл с выходными данными при выборе данного элемента.

нет

нет

text

Название элемента списка.

нет

нет

selected

Элемент списка, который выбран по умолчанию:

  • selected=true — сделать элемент списка выбранным по умолчанию.

  • selected=false — оставить элемент списка невыбранным по умолчанию.

нет

false

В описании выходных данных добавьте поле с типом string:

{
  "colour": {
        "type": "string",
        "required": true
    }
}

Кнопка для загрузки файла

Чтобы добавить в задание кнопку для загрузки файла, используйте компонент {{field type="file" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type="file" name="result" }}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: file — кнопка для загрузки файла.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

label

Название кнопки в интерфейсе. Например, label="Нажми меня".

нет

В зависимости от языка интерфейса «Загрузить файл» (русский), «Upload file» (английский), «Dosya yükle» (турецкий), «Unggah file» (индонезийский).

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_file"

В описании выходных данных добавьте поле с типом file. Например:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Кнопка для загрузки картинки

Чтобы добавить в задание кнопку для загрузки картинки , используйте компонент {{field type="file-img" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. После загрузки картинки пользователь увидит иконку для предварительного просмотра изображения. Например:

{{field type="file-img" name="photo" camera=true}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

type

Тип поля: file-img — кнопка для загрузки картинки.

да

нет

name

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

да

нет

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

preview

Отображение уменьшенного изображение после загрузки:

  • preview=true — отображать.

  • preview=false — не отображать.

нет

true

camera

Запуск камеры при нажатии на кнопку загрузки картинки:

  • camera=true — запускать камеру.

  • camera=false — не запускать камеру.

нет

false

compress

Сжатие изображения:
  • compress=true— уменьшать картинку до размера 1000*1000 пикселей (сохраняется в формате JPEG с уровнем качества 90).

  • compress=false— передавать картинку без изменений.

нет

true

requiredCoordinates

Обязательность координат в информации об изображении.
  • requiredCoordinates=true— координаты обязательны.

  • requiredCoordinates=false— координаты необязательны.

нет

false

В описании выходных данных добавьте поле с типом file. Например:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Редактор для выделения области на картинке

Редактор дает возможность выделить область на картинке:

Чтобы добавить редактор в задание:
  1. Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).

  2. Включите в HTML-код интерфейса компонент {{field type="image-annotation" name="<идентификатор поля>" src=<URL изображения>}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

    {{field type="image-annotation" name="result" src=url}}
    Полный список параметров

    Параметр

    Описание

    Обязательность

    Значение по умолчанию

    type

    Тип поля: image-annotation— редактор для выделения области на картинке.

    да

    нет

    name

    Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

    да

    нет

    src

    URL изображения. Варианты значений:

    • URL из входных данных задания. Например, из поля с идентификатором url: src=url.

    • Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: src="https://mywebsite.ru/img1.png".

    да

    нет

  3. Добавьте поле с типом json в описании выходных данных. Например:

    {
      "result": {
        "type": "json",
        "required": true
      }
    }

    В выходные данные записывается объект JSON c координатами точек многоугольника. Например:

    [{"result":[{"x":0.137,"y":0.102},{"x":0.127,"y":0.277},{"x":0.267,"y":0.245},{"x":0.362,"y":0.158},{"x":0.212,"y":0.115}],"type":"polygon"}]

    Значения x и y — числа от 0 до 1. Длина и ширина изображения принимаются за 1, начало координат находится в левом нижнем углу картинки.

Чтобы пользователь мог ввести аннотацию к выделенной области, в задание нужно добавить элемент интерфейса (например, переключатель, флажки, текстовое поле):

  1. Получите объект редактора getEditor() и интерфейса для аннотаций getField('annotations') в методе onRender():

    var field = this.getField('annotations');     
    var editor = field.getEditor();
  2. Установите реализацию интерфейса для аннотаций в методах:
    • createInterfaceElement() — вызывает DOM-элемент интерфейса (вызывается один раз при инициализации).

    • onShow(shape, options) — отображает интерфейс для аннотаций, когда пользователь наводит мышку на выделенную область. Получает на вход JSON с координатами точек многоугольника. В этот JSON можно записать аннотацию, которую ввел пользователь.

    Пример кода редактора с текстовым полем ввода:

    editor.annotationInterface = field.createAnnotationInterface({
        createInterfaceElement: function() {
            this._input = document.createElement('input');
            this._input.addEventListener('input', function() {
                this._shape.annotation = this._input.value;
            }.bind(this));
            return this._input;
        },
        onShow: function(shape) {
            this._shape = shape;
            this._input.value = shape.annotation;
        }
    });

Взаимодействие пользователя с редактором вызывает следующие события:

  • shape:start — начало выделения области.

  • shape:finish — завершение выделения.

  • shape:cancel — удаление точки.

  • shape:remove — удаление выделения.

Подписаться на эти события можно так:

editor.on('shape:start', function() { 
    /* обработка события */ 
});

Картинка

Чтобы вставить в задание картинку, используйте компонент {{img src=<URL изображения>}}. Например:

{{img src=url width="100px" height="75px"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

src

URL изображения. Варианты значений:

  • URL из входных данных задания. Например, из поля с идентификатором url: src=url.

  • Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: src="https://mywebsite.ru/img1.png".

да

нет

width

Ширина изображения. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину с формулой. Например, width="calc(100%-30px)".

нет

"300px"

height

Высота изображения. Указывается в следующих единицах:

  • Пиксели. Например, height="100px".

  • Доля от размера родительского элемента. Например, height="100%".

Можно также задать ширину формулой. Например, height="calc(100%-30px)".

нет

"300px"

real-size

Масштабирование изображения. Возможные значения:

  • real-size=false — растягивать изображение по размеру родительского элемента.

  • real-size=true — использовать исходный размер изображения (если он не превышает размер родительского элемента).

нет

false

class

CSS-класс для картинки.

нет

".img"

Кнопка

Чтобы вставить в задание кнопку, используйте компонент {{button}}. Например:

{{button label="Нажми меня" href="https://yandex.ru" action=true}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

label

Название кнопки в интерфейсе.

нет

пустая строка

href

Ссылка, которая откроется при нажатии на кнопку. Ссылка открывается в новой вкладке браузера.

нет

action

Цвет кнопки:

  • action=true — желтый.

  • action=false — белый.

нет

false

size

Размер кнопки (с сохранением соотношения высоты и ширины):
  • "S" — высота 24 px.

  • "M" — высота 28 px.

  • "L" — высота 32 px.

  • "XL" — высота 38 px.

нет

"M"

class

CSS-класс.

нет

".button"

Встроенный фрейм

Чтобы добавить в задание встроенный фрейм, используйте компонент {{iframe src=<URL объекта>}}. Например:

{{iframe src=url width="100px" height="100px"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

src

URL страницы.

да

нет

width

Ширина фрейма. Указывается в следующих единицах:

  • Пиксели. Например, width="100px".

  • Доля от размера родительского элемента. Например, width="100%".

Можно также задать ширину с формулой. Например: width="calc(100%-30px)".

нет

"300px"

height

Высота фрейма в пикселях. Указывается в следующих единицах:

  • Пиксели. Например, height="100px";

  • Доля от размера родительского элемента. Например, height="100%".

Можно также задать ширину с формулой. Например: height="calc(100%-30px)".

нет

"500px"

content-width

Ширина содержимого во фрейме в пикселях. Например, content-width="700".

Чтобы фрейм был шириной с экран, задайте content-width="false".

нет

"1280"

zoom

Кнопка для увеличения фрейма до размера окна браузера:

  • zoom=true — увеличить фрейм до размера окна браузера.
  • zoom=false — сохранить заданный размер фрейма.

нет

false

class

CSS-класс для фрейма.

нет

".iframe"

sandbox

Включает режим песочницы, ограничивающий работу во фрейме.

Чтобы выключить некоторые запреты, можно использовать следующие значения (комбинируются через пробел):

  • "allow-same-origin" — разрешает переходить по ссылкам внутри фрейма (воспринимает их как контент из того же источника, что и родительский документ).

  • "allow-top-navigation" — разрешает открывать ссылки фрейма в родительском документе.

  • "allow-forms" — разрешает содержимому фрейма отправлять формы.

  • "allow-scripts" — разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.

  • "false" — выключает перечисленные ограничения.

нет

"allow-scripts", "allow-same-origin"

Полный URL-путь для получения данных от внешнего сервиса

Чтобы получить полный URL-путь для получения данных через прокси-сервер, используйте компонент {{proxy "<относительная ссылка>"}}. Относительная ссылка должна начинаться с уникального имени источника данных, которое указывается при подключении внешнего HTTP-сервиса. Например:

{{proxy "my_files/images"}}