Как определить, загружается ли веб-страница внутри iframe или непосредственно в окно браузера?

Браузеры могут блокировать доступ к window.top из-за та же политика происхождения. Ошибки IE также имеют место. Вот рабочий код:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

top и self являются объектами window (вместе с parent), поэтому вы видите, является ли ваше окно верхним окном.

Роборг прав, но я хотел добавить примечание.

В IE7 / IE8, когда Microsoft добавила вкладки в свой браузер, они сломали одну вещь, которая нанесет ущерб вашему JS, если вы не будете осторожны.

Представьте себе этот макет страницы:

MainPage.html
  IframedPage1.html   (named "foo")
  IframedPage2.html   (named "bar")
    IframedPage3.html (named "baz")

Теперь во фрейме «baz» вы нажимаете ссылку (нет цели, загружается во фрейме «baz»), все работает нормально.

Если загружаемая страница вызовет ее special.html, использует JS, чтобы проверить, есть ли у «нее» родительский фрейм с именем «bar», он вернет true (ожидалось).

Теперь предположим, что страница special.html при загрузке проверяет родительский фрейм (на наличие и его имя, и если это "bar", он перезагружается в рамке bar. Например

if (window.parent && window.parent.name == 'bar'){
  window.parent.location = self.location;
}

Все идет нормально. Теперь идет ошибка.

Допустим, вместо того, чтобы щелкнуть исходную ссылку, как обычно, и загрузить страницу special.html во фрейме «baz», вы щелкнули по ней средней кнопкой мыши или решили открыть ее в новой вкладке.

Когда эта новая вкладка загружается (без родительских фреймов!) IE войдет в бесконечный цикл загрузки страницы!, потому что IE «копирует» структуру фрейма в JavaScript, так что новая вкладка ДЕЙСТВИТЕЛЬНО имеет родителя, а у этого родителя ИМЕЕТ имя «bar».

Хорошая новость в том, что проверка:

if (self == top){
  //this returns true!
}

в этой новой вкладке возвращает true, и поэтому вы можете проверить это странное условие.

Поскольку вы запрашиваете в контексте приложения facebook, вы можете рассмотреть возможность обнаружения этого на сервере при выполнении первоначального запроса. Facebook передает кучу данных строки запроса, включая ключ fb_sig_user, если он вызывается из iframe.

Поскольку вам, вероятно, все равно придется проверять и использовать эти данные в своем приложении, используйте их для определения соответствующего контекста для рендеринга.

Используйте эту функцию javascript в качестве примера того, как это сделать.

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
    var tophref = top.location.href;
    var tophostname = top.location.hostname.toString();
    var myhref = location.href;
    if (tophref === myhref) {
        myresult = true;
    } else if (tophostname !== "www.yourdomain.com") {
        myresult = false;
    }
} catch (error) { 
  // error is a permission error that top.location.href is not accessible 
  // (which means parent domain <> iframe domain)!
    myresult = false;
}
return myresult;
}

Принятый ответ не сработал для меня внутри сценария содержимого расширения Firefox 6.0 (Addon-SDK 1.0): Firefox выполняет сценарий содержимого в каждом: окне верхнего уровня и во всех окнах iframe.

Внутри скрипта содержимого я получаю следующие результаты:

 (window !== window.top) : false 
 (window.self !== window.top) : true

Странность этого вывода заключается в том, что он всегда один и тот же, независимо от того, выполняется ли код внутри iframe или в окне верхнего уровня.

С другой стороны, Google Chrome, похоже, выполняет мой сценарий содержимого только один раз в окне верхнего уровня, поэтому вышеуказанное не будет работать вообще.

Что в итоге сработало для меня в сценарии содержимого в обоих браузерах:

 console.info(window.frames.length + ':' + parent.frames.length);

Без iframe он печатает 0:0, в окне верхнего уровня, содержащем один фрейм, он печатает 1:1, а в единственном iframe документа он печатает 0:1.

Это позволяет моему расширению определять в обоих браузерах, есть ли какие-либо фреймы iframe, и дополнительно в Firefox, если оно запускается внутри одного из iframe.

Это древний фрагмент кода, который я использовал несколько раз:

if (parent.location.href == self.location.href) {
    window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}

Я использую это:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);

if (window.frames.length != parent.frames.length) { page loaded in iframe }

Но только если количество фреймов отличается на вашей странице и странице, которая загружает вас в iframe. Не делайте iframe на своей странице, чтобы иметь 100% гарантию результата этого кода

Напишите этот javascript на каждой странице

if (self == top)
  { window.location = "Home.aspx"; }

Затем он автоматически перенаправляется на домашнюю страницу.

Если вы хотите узнать, обращается ли пользователь к вашему приложению с вкладки страницы facebook или холста, проверьте подписанный запрос. Если вы его не получили, вероятно, пользователь не получает доступ из Facebook. Чтобы убедиться, что подтвердите структуру полей signed_request и содержимое полей.

С помощью php-sdk вы можете получить подписанный запрос следующим образом:

$signed_request = $facebook->getSignedRequest();

Вы можете узнать больше о подписанном запросе здесь:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

и тут:

https://developers.facebook.com/docs/reference/login/signed-request/

Находясь в iframe из того же источника, что и родительский, метод window.frameElement возвращает элемент (например, iframe или object), в который встроено окно. В противном случае, при просмотре в контексте верхнего уровня или если родительский и дочерний фреймы имеют разное происхождение, он будет оцениваться как null.

window.frameElement
  ? 'embedded in iframe or object'
  : 'not embedded or cross-origin'

Это Стандарт HTML с базовой поддержкой во всех современных браузерах.

Я на самом деле использовал для проверки window.parent, и это сработало для меня, но в последнее время окно является циклическим объектом и всегда имеет родительский ключ, iframe или без iframe.

Поскольку в комментариях предлагается жесткое сравнение с window.parent, работает. Не уверен, что это сработает, если iframe - это та же веб-страница, что и родительская.

window === window.parent;

Я не уверен, как этот пример работает для старых веб-браузеров, но я без проблем использую его для IE, Firefox и Chrome:

var iFrameDetection = (window === window.parent) ? false : true;

Самый лучший на данный момент скрипт разрыва фрейма в устаревшем браузере

Другие решения у меня не сработали. Этот работает во всех браузерах:

Один из способов защиты от кликджекинга - это включить на каждую страницу скрипт "взлома фреймов", который не должен быть во фрейме. Следующая методика предотвратит создание веб-страницы даже в устаревших браузерах, которые не поддерживают X-Frame-Options-Header.

В элементе HEAD документа добавьте следующее:

<style id = "antiClickjack">body{display:none !important;}</style>

Сначала примените идентификатор к самому элементу стиля:

<script type = "text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

Таким образом, все может быть в документе HEAD, и вам понадобится только один метод / taglib в вашем API.

Ссылка: https://www.codemagi.com/blog/post/194

Это оказалось для меня самым простым решением.

    <p id = "demofsdfsdfs"></p>

<script>

if (window.self !== window.top) {

//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";

}else{

//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}

</script>

if ( window.location !== window.parent.location ) 
{
      // The page is in an iframe   
} 
else 
{     
      // The page is not in an iframe   
}

function amiLoadedInIFrame() {
    try {
         // Introduce a new propery in window.top
         window.top.dummyAttribute = true;
         // If window.dummyAttribute is there.. then window and window.top are same intances
         return !window.dummyAttribute;
    } catch(e) {
         // Exception will be raised when the top is in different domain
         return true;
    }
}

Следуя тому, что сказал @magnoz, вот кодовая реализация его ответа.

constructor() {
    let windowLen = window.frames.length;
    let parentLen = parent.frames.length;

    if (windowLen == 0 && parentLen >= 1) {
        this.isInIframe = true
        console.info('Is in Iframe!')
    } else {
        console.info('Is in main window!')
    }
}