Какво е iframe?

<iframe> (inline frame) е HTML елемент, който вгражда друга уеб страница или документ в текущата страница. Той създава отделен контекст за преглед в правоъгълна област на страницата, позволявайки съдържание от различен URL — като карта, видео или уиджет на трета страна — да се показва без потребителят да напуска страницата.

Iframe се използват често за вграждане на YouTube видеа, Google Maps, формуляри за плащане, уиджети на социални мрежи и реклами. Тъй като вграденото съдържание работи в собствен контекст, атрибути като sandbox и allow позволяват на разработчиците да контролират строго какво е позволено на вградената страница да прави.

Описание на инструмента

Този инструмент генерира готов за поставяне <iframe> HTML код от прост формуляр. Конфигурирайте URL адреса на източника, размерите, поведението при превъртане, стратегията за зареждане, разрешенията и ограниченията на sandbox, и инструментът незабавно извежда съответния таг. Не е необходимо ръчно писане на атрибути или запомняне на синтаксиса на флаговете на sandbox.

Примери

Минимален iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe със забавено зареждане и sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe с разрешения за камера и микрофон:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Функции

  • Генерира валиден <iframe> код от визуален формуляр — не е необходимо познание на HTML
  • Пълен контрол над разрешенията (allow) и ограниченията на sandbox
  • Преглед в реално време се актуализира при всяка промяна на опция

Обяснение на опциите

Опция Описание
URL Атрибутът src — адресът на страницата за вграждане
Ширина / Височина Размери в пиксели на iframe
Заглавие Достъпна етикета (title атрибут) за екранни четци
Име Атрибутът name, използван като цел на връзка
Превъртане Контролира лентата за превъртане: автоматично, винаги включена или винаги изключена
Зареждане eager зарежда незабавно; lazy отлага до близо до видимата област
Разрешаване на пълен екран Добавя allowfullscreen така че вграденото съдържание да може да отиде в пълен екран
Граница Когато е отмаркирано, добавя style="border: none;" за премахване на подразумеваната граница
Разрешаване на функции Дава специфични разрешения на браузърния API на вградената страница
Флагове на sandbox Ограничава какво може да прави вградената страница; всеки флаг преактивира специфична възможност

Съвети

  • Винаги предоставете title атрибут за достъпност — екранните четци го обявяват при фокусиране на iframe.
  • Използвайте loading="lazy" за iframe под сгъвката, за да подобрите производителността при зареждане на страница.
  • Добавянето на атрибута sandbox без флагове заключва съдържанието напълно; добавете само флаговете, които действително имате нужда.