如何检测当前网页是在 iframe 中加载还是浏览器直接加载？

在网页开发过程中，如果需要判断当前的网页是在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 对象与 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 中还是直接在浏览器中打开，这样我们就可以根据不同的情况调整布局和功能。我们就使用了上述的方法来进行检测，并相应地调整了组件的响应式设计。