Как определить - открыта страница или iframe

определяем : "Это iframe или страница". Можно ли вообще определить... где находится код внутри "iframe" или за его пределами!

Подробно о том - это iframe или страница?

1. Подготовка к определению - это iframe или страница
2. Живой пример определения - это iframe или страница
3. Скачать

Подготовка к определению - это iframe или страница

Для того, чтобы определить - это страница или iframe нам понадобится:

Отдельная простая html страница страница с помещенным туда кодом javascript.

И второй блок - iframe

Страница html с javascript кодом

Не буду приводить всю страницу с "javascript кодом" - который будет проверять - "Это iframe или страница" - её можно скачать здесь

А выведу лишь условие... здесь:

Для того, чтобы понять, какое окно загружается нам понадобится:

self.parent

self

В чем их интересность - это как раз то, что нам нужно! На странице они покажут одно и тоже, но вот если страница будет загружаться в "iframe" - они покажут разное! подробнее

<script>

if (self.parent !== self)

{

document.write('<div class="out_frame">Вы читаете меня во iframe</div>');

}

else

{

document.write('<div class="in_frame ">Вы читаете меня на странице....</div>');

}

</script>

Смотрим на страницу :
its_page_iframe.html

Далее... нам потребуется iframe

У нас есть адрес страницы :

https://dwweb.ru/__a-data/__all_for_scripts/no_etv/iframe/its_page_iframe.html

Помещаем данный адрес в iframe :

<iframe style ="width:750px;height:50px;border:none;margin:20px 0;" src="https://dwweb.ru/__a-data/__all_for_scripts/no_etv/iframe/its_page_iframe.html"></iframe>

И нам осталось только вывести этот iframe здесь и для сравнения можете открыть эту страницу отдельно:

Вывод о выше приведенном...

Вывод - если вы не смотрели в консоль, такой:

Цвет бордюра и цвет текста отличаются в зависимости от того, где данная страница открыта... либо в браузере ... либо в iframe.

И ниже вы можете прочитать подробности...




Способ как определить это страница или iframe

Чтобы сейчас глубоко не копать тему self.parent и self я сделаю вот что:

Выше... вы уже видели код..., где встречалось условие:

if (self.parent !== self)

В помощь мы призовем console.log

Выведем в консоль и сравним две позиции:

  1). console.log(self.location.href);
  2). console.log(self.parent.location.href);


Поместим эти две строки на страницу, которую откроем в браузере и посмотрим, что там вывелось в консоли (вы можете открыть эту страницу и посмотреть в консоль).

Я же выведу скриншот прямо здесь... как видим эти две строки вывели один и тот же адрес...:


Нажмите, чтобы открыть в новом окне.



Теперь давайте откроем консоль прямо на этой страницу... ведь здесь загружается iframe с этой страницей...как видим, что эти две строки будут отличаться... значит... "self" и "self.parent" будут отличаться..., а где они будут отличаться... там и будет iframe

Нажмите, чтобы открыть в новом окне.