Идентификация загрузки веб-страницы: в iframe или браузере

Быстрый ответ

Вы можете определить, загружена ваша веб-страница в iframe или напрямую в окне браузера, применив следующий код на JavaScript:

const isInIframe = window !== window.parent;

Значение переменной isInIframe будет true, если страница отображается внутри iframe, и false в противном случае. Но стоит отметить, что есть некоторые особенности, связанные с различными условиями загрузки страниц, которые требуют более тщательного анализа.

Ограничения кросс-доменных запросов и определение iframe

Политика одного источника (Same-Origin Policy) накладывает ограничения на работу с iframe. Если ваш iframe и родительский документ расположены на разных доменах, доступ к window.parent может быть ограничен по причинам безопасности. Но можно применить следующею стратегию обхода:

let isInIframe;
try {
    isInIframe = window.self !== window.top;
} catch (e) {
    isInIframe = true; // Если доступ воспрещен, значит, мы, скорее всего, в iframe.
}

Этот приём помогает минимизировать риск исключений, связанных с ограничениями кросс-доменного взаимодействия.

Использование frameElement для определения iframe

Еще один способ — использование свойства window.frameElement, которое возвращает null, если окно не является iframe:

const isInIframe = window.frameElement != null;

Если при обращении к window.frameElement iframe размещён на другом домене, может возникнуть ошибка из-за кросс-доменных ограничений!

Визуализация

Представьте себе следующую аналогию:

if (window.self === window.top) {
  console.log("Праздник в главном здании!");  // 🏠✅
} else {
  console.log("Отдых в гостевой комнате"); // 🏠🛏❗️
}

➡ window.self соответствует положению в главном здании, то есть в главном окне.
➡ window.top соответствует всей территории, то есть окну самого верхнего уровня.

Прямой доступ (🔓🌐):      🏠 ✅ | Вы на празднике в главном здании.
Внутри <iframe> (🔒🖼️): 🏠🛏 ❗️ | Вы отдыхаете в гостевой комнате, то есть в iframe.

Сама суть вопроса — понять, где происходит действие (событие).

Разработка приложений, поддерживающих iframe

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

• Пользовательский опыт: внутри iframe может потребоваться иная организация интерфейса для оптимизации навигации.
• Функциональность: некоторые функции могут потребовать полного управления окном; понимание контекста помогает в управлении ими.
• Производительность: приложение, работающее внутри iframe, может столкнуться с ограничениями по производительности из-за меньших доступных ресурсов.

Адаптация поведения приложения исходя из контекста загрузки

Приложение может требоваться настроить поведение в зависимости от того, в каком контексте оно загружено. Пример подобной настройки:

if (window !== window.parent) {
  // Мы в iframe. Произведем корректировки.
  adaptToIframe();
} else {
  // Загрузка произошла напрямую. Разворачиваем функционал на полную катушку.
  adaptToDirectLoad();
}

Это важно особенно для приложений, работающих на платформах типа Facebook Canvas.

Полезные материалы

1. Window: frameElement property – Web APIs | MDN — обращение к функционалу родительского окна из iframe.
2. HTML iframe tag – W3Schools — полное руководство по использованию тэга iframe в HTML.
3. Play safely in sandboxed IFrames | Articles | web.dev — об использовании iframe в "песочнице" ради безопасности.
4. Same-origin policy – Security on the web | MDN — базовые принципы веб-безопасности для избегания междоменных атак.
5. RFC 6454 – The Web Origin Concept – IETF — техническое описание концепции происхождения в Интернете.
6. HTML Standard — объяснение контекстов просмотра в HTML.
7. Web Security Context: User Interface Guidelines – W3C — руководство W3C по контексту безопасности пользовательских интерфейсов.