如何识别网页是在iframe中加载还是直接加载到浏览器窗口？

Question

我正在写一个基于iframe的Facebook应用程序.现在我想使用相同的html页面来呈现普通网站以及facebook中的画布页面.我想知道我是否可以确定页面是在iframe中加载还是直接在浏览器中加载？

Answer 1

window.top由于相同的原始策略,浏览器可以阻止访问.IE漏洞也会发生.这是工作代码:

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

top并且self都是window对象(连同parent),所以你看到你的窗口是否是顶部窗口.

Answer 2

该window.frameElement方法返回嵌入窗口的元素(例如iframe或object),或者null在顶级上下文中浏览:

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

这是一个HTML标准,在所有现代浏览器中都提供基本支持.

Answer 3

RoBorg是正确的,但我想添加一个旁注.

在IE7/IE8中,当微软将Tabs添加到他们的浏览器时,如果你不小心,他们就会破坏一件会对你的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",它会在条形框架中重新加载.例如

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

到现在为止还挺好.现在来了错误.

让我们说,不是像正常一样点击原始链接,而是在"baz"框架中加载special.html页面,您可以在其中间单击它或选择在新选项卡中打开它.

当新的选项卡加载时(根本没有父框架!)IE将进入无限循环的页面加载!因为IE"复制"JavaScript中的帧结构,使得新选项卡具有父项,并且该父项具有名称"bar".

好消息是检查:

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

在新的选项卡确实返回true,因此您可以测试这个奇怪的条件.

Answer 4

在Firefox 6.0 Extension(Addon-SDK 1.0)的内容脚本中,接受的答案对我不起作用:Firefox在每个中执行内容脚本:顶级窗口和所有iframe.

在内容脚本中,我得到以下结果:

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

关于此输出的奇怪之处在于,无论代码是在iframe内还是在顶级窗口中运行,它始终都是相同的.

另一方面,谷歌浏览器似乎只在顶级窗口中执行一次我的内容脚本,因此上述内容根本不起作用.

在两种浏览器的内容脚本中最终为我工作的是:

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

如果没有iframe 0:0,则会1:1在包含一个打印的框架的顶级窗口中打印,并在其打印的文档的唯一iframe中打印0:1.

这允许我的扩展程序在两个浏览器中确定是否存在任何iframe,另外在Firefox中如果它在其中一个iframe中运行.

Answer 5

我不确定此示例如何适用于较旧的Web浏览器,但我将其用于IE,Firefox和Chrome而没有和问题:

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

Answer 6

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

Answer 7

我正在使用这个:

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