Как на чистом JavaScript определить загружена страница напрямую в браузере по ссылке или открыта в iframe

Описание товара

Вопрос на тему HTML и JavaScript. Есть некоторая страница сайта, в ней открывается iframe. Соответственно при открытии страницы указанной в src тега указаны необходимые заголовки чтобы iframe открылся. Предположим страница уже загрузилась. На ней можно разместить произвольный JavaScript. Задача: можно ли используя только JavaScript на загружаемой iframe странице определить что она открыта именно в iframe? Важно! JS должен быть статическим и не зависеть от генерирующего страницу скрипта(например PHP), который в том числе устанавливает необходимые HTTP заголовки разрешающие открывать iframe. То-есть задачу можно решать только через JS. Не следует полагаться на размеры iframe окна, так как они могут быть специально указаны как у окна браузера(хотя если есть вариант точно отличить - тогда можно).

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

1. Проверка window.self и window.top

Если страница загружена в iframe, то window.self не будет равен window.top.

    
if (window.self !== window.top) {
    console.log("Страница загружена в iframe");
} else {
    console.log("Страница загружена как основная");
}

  

2. Проверка window.parent

Если страница загружена в iframe, window.parent будет отличаться от window.

    
if (window.parent !== window.self) {
    console.log("Страница загружена в iframe");
}

  

3. Попытка доступа к window.frameElement

Если страница загружена в iframe, window.frameElement вернет сам элемент iframe, иначе — null.

    
if (window.frameElement) {
    console.log("Страница загружена в iframe");
}

  

4. Проверка через document.referrer (не всегда надежно)

Если страница загружена в iframe, document.referrer может содержать URL родительской страницы (но это зависит от политик браузера и CORS).

    
if (document.referrer && document.referrer !== "") {
    console.log("Возможно, страница загружена в iframe (но не точно)");
}

  

Самый надежный способ

Лучше всего использовать комбинацию проверок window.self !== window.top и window.frameElement:

    
const isInIframe = () => {
    try {
        return window.self !== window.top || !!window.frameElement;
    } catch (e) {
        return true; // Если доступ к window.top запрещен (например, из-за CORS), значит, это iframe
    }
};
      
if (isInIframe()) {
    console.log("Страница загружена в iframe");
} else {
    console.log("Страница загружена как основная");
}

  

Почему это работает?

Если страница в iframe, то window.top указывает на главное окно, а window.self — на текущий iframe.

Если доступ к window.top запрещен (например, из-за политики безопасности), то попытка сравнения выбросит исключение, что тоже говорит о том, что страница в iframe.

window.frameElement возвращает сам элемент iframe, если он есть.

Этот подход не зависит от PHP, HTTP-заголовков или размеров окна и работает чисто на стороне JavaScript.

Другие товары