How to identify if a webpage is being loaded inside an iframe or directly load?

在网页开发过程中，如果需要判断当前的网页是在iframe内加载，还是直接在浏览器窗口加载的，我们可以使用JavaScript来做这样的判断。以下是两种常用的方法：

1. 使用 window 对象的 self 和 top 属性

JavaScript中的window对象有两个特别的属性：self和top。window.self返回当前窗口的引用，而window.top返回当前浏览器窗口的最顶层窗口的引用。如果一个网页是直接在浏览器窗口中加载的，那么window.self和window.top应该是相同的。如果网页在一个iframe中加载，那么window.self将是iframe的窗口对象，而window.top将是最顶层（含嵌套的iframe）窗口的对象。所以我们可以通过比较这两个属性是否相等来判断：

javascript
if (window.self === window.top) {
  // 当前网页不在iframe中，直接在浏览器窗口加载
  console.log("网页直接在浏览器窗口中加载。");
} else {
  // 当前网页在iframe中加载
  console.log("网页在iframe内加载。");
}

2. 使用 window 对象的 parent 属性

另外一个方法是比较window.parent和window.self。window.parent返回当前窗口的父级窗口对象。如果当前窗口没有父窗口，parent属性返回自身（即window.self）。我们可以这样判断：

javascript
if (window.parent === window.self) {
  // 当前网页不在iframe中，直接在浏览器窗口中加载
  console.log("网页直接在浏览器窗口中加载。");
} else {
  // 当前网页在iframe中加载
  console.log("网页在iframe内加载。");
}

示例应用场景

一个实际的应用场景是网页中的JavaScript脚本需要根据网页是否在iframe中加载来调整其行为。例如，如果一个网页在iframe中时，可能不希望显示某些元素或者调整布局；或者为了安全考虑，可能不允许在iframe中加载某些操作。

通过上述的方法，开发者可以在脚本中加入判断逻辑，然后根据该逻辑来调整页面的展示或功能。

window.top注意：由于同源策略，浏览器可能会阻止访问。IE bug 也会发生。

这是工作代码：

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

top和self都是window对象（与 一起parent），因此您可以查看您的窗口是否是顶部窗口。

当位于与父级同源的 iframe 中时，该方法返回嵌入窗口的window.frameElement元素（例如iframe或）。object否则，如果在顶级上下文中浏览，或者父框架和子框架具有不同的来源，则它将评估为null。

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

这是一个HTML 标准，所有现代浏览器都提供基本支持。

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

我不确定此示例如何适用于较旧的 Web 浏览器，但我将其用于 IE、Firefox 和 Chrome，没有出现任何问题：

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

RoBorg 是正确的，但我想添加一个旁注。

在 IE7/IE8 中，当 Microsoft 在浏览器中添加选项卡时，他们破坏了一件事情，如果你不小心的话，会对你的 JS 造成严重破坏。

想象一下这个页面布局：

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

现在，在框架“baz”中，您单击一个链接（没有目标，在“baz”框架中加载），它工作正常。

如果加载的页面（我们称其为special.html），使用JS 检查“it”是否有名为“bar”的父框架，它将返回true（预期）。

现在让我们说，special.html 页面在加载时会检查父框架（是否存在及其名称，如果它是“bar”，它会在栏框架中重新加载自身。例如

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

到目前为止，一切都很好。现在错误来了。

可以说，您没有像平常一样单击原始链接并在“baz”框架中加载special.html 页面，而是中键单击它或选择在新选项卡中打开它。

当新选项卡加载时（根本没有父框架！）**IE 将进入页面加载的无限循环！**因为 IE“复制”了 JavaScript 中的框架结构，使得新选项卡确实有一个父选项卡，并且该父选项卡的名称为“bar”。

好消息是检查：

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

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

当您需要确定网页是在 iframe 内加载还是在直接浏览器窗口中加载的，可以通过检查 window 对象与 top 对象是否相同来判断。window 对象代表当前窗口，而 top 对象代表顶层窗口。如果一个网页是在 iframe 中加载的，那么它的 window 对象将与 top 对象不同，因为 top 将指向包含 iframe 的最外层的窗口。相反，如果网页直接在浏览器窗口中加载，window 对象将等同于 top 对象。

这里有一个简单的JavaScript代码示例，可以用来检测一个网页是否在 iframe 中加载：

javascript
if (window === top) {
  console.log("网页是在直接浏览器窗口中加载的。");
} else {
  console.log("网页是在iframe内加载的。");
}

当这段代码运行时，如果网页是直接在浏览器窗口中加载的，window === top 将返回 true，并打印出相应的信息。如果网页是在 iframe 中加载的，条件将返回 false，并打印出不同的信息。

举个实际的例子，假设我之前负责的一个项目是开发一个第三方评论组件，客户可以将这个组件嵌入到他们的网页中，通常是通过 iframe 来实现。我们需要在组件内判断它是被嵌入到 iframe 中还是直接在浏览器中打开，这样我们就可以根据不同的情况调整布局和功能。我们就使用了上述的方法来进行检测，并相应地调整了组件的响应式设计。