在 iframe 中还是在浏览器中：识别网页加载位置的指南

在 iframe 中还是在浏览器中：识别网页加载位置的指南

简介

在构建基于 iframe 的 web 应用程序时，确定页面是在 iframe 中加载还是直接在浏览器窗口中加载至关重要。本指南将探讨各种方法来检测网页的加载位置，并提供代码示例和最佳实践。

子标题 1：检查 window.parent 和 window.self

一种简单的方法是检查 window.parent 和 window.self 对象。如果这两个对象不相等，则页面在 iframe 中加载：

if (window.parent !== window.self) {
  // 页面在 iframe 中加载
} else {
  // 页面直接在浏览器中加载
}

子标题 2：检查 window.top

另一个选择是检查 window.top 对象。如果 window.top 不等于 window.self，则页面在 iframe 中加载：

if (window.top !== window.self) {
  // 页面在 iframe 中加载
} else {
  // 页面直接在浏览器中加载
}

子标题 3：检查 document.referrer

document.referrer 属性可以指示页面是从哪个 URL 加载的。如果 document.referrer 包含 iframe 的 URL，则页面在 iframe 中加载：

if (document.referrer.indexOf("iframe-url") !== -1) {
  // 页面在 iframe 中加载
} else {
  // 页面直接在浏览器中加载
}

子标题 4：检查导航类型

如果浏览器支持 window.performance.navigation 属性，则可以检查 type 属性。如果 type 是 2，则页面在 iframe 中加载：

if (window.performance && window.performance.navigation) {
  if (window.performance.navigation.type === 2) {
    // 页面在 iframe 中加载
  } else {
    // 页面直接在浏览器中加载
  }
}

子标题 5：使用第三方库

除了原生 JavaScript 方法外，还有许多第三方库可以简化 iframe 检测过程，例如 iframe-detect、iframely 和 jquery-iframe-auto-height。

子标题 6：注意事项

值得注意的是，这些方法在某些情况下可能失败，例如：

• 页面加载在沙盒 iframe 中
• iframe 使用与主页面相同的域名

因此，建议结合多种方法来提高检测准确性。

结论

通过遵循本指南，您可以轻松确定网页是加载在 iframe 中还是直接在浏览器窗口中。这些方法对于构建基于 iframe 的应用程序至关重要，这些应用程序需要根据加载位置定制其行为。

常见问题解答

1. 如何检查一个页面是否在沙盒 iframe 中加载？

   • 检查 window.top.location 是否与 window.location 不同。如果不同，则页面在沙盒 iframe 中加载。

2. 如何处理 iframe 与主页面使用相同域名的场景？

   • 尝试使用 document.domain 来检查 iframe 的源是否是主页面的子域。

3. 第三方库是否有优势？

   • 第三方库可以提供更高级的功能，例如自动调整 iframe 高度、跨域通信等。

4. 这些方法是否适用于所有浏览器？

   • 大多数现代浏览器都支持这些方法，但较旧的浏览器可能需要使用 polyfill。

5. 如何确保检测的准确性？

   • 结合多种方法，并考虑可能影响检测的例外情况，如沙盒 iframe 或相同的域名。