在前端开发过程中，有时我们需要确定当前页面是否嵌套在一个 iframe 中。这可能会影响某些行为和功能的实现，因此需要知道如何检测。
1. 使用 window.self 和 window.top
iframe 元素提供了一个 contentWindow 属性，该属性返回包含 iframe 的窗口的 Window 对象。可以使用 contentWindow.self 来引用当前文档所属的窗口对象（一般是顶层窗口），而 window.top 则始终指向最外部的窗口对象（即顶层窗口）。
通过比较 window.self 和 window.top 是否相等，可以判断当前页面是否嵌套在 iframe 中。如果两者不相等，则说明当前页面加载在 iframe 中。示例代码如下：
if (window.self !== window.top) {
console.log('This page is loaded in an iframe.');
} else {
console.log('This page is not loaded in an iframe.');
}2. 使用 window.frameElement
除了上述方法之外，还可以使用 window.frameElement 属性来确定当前页面是否嵌套在一个 iframe 中。如果当前页面没有在 iframe 中加载，那么 window.frameElement 的值为 null；否则，它将引用包含当前文档的 iframe 元素。
示例代码如下：
if (window.frameElement) {
console.log('This page is loaded in an iframe.');
} else {
console.log('This page is not loaded in an iframe.');
}3. 总结
在前端开发中，需要根据实际情况确定当前页面是否嵌套在 iframe 中。上述两种方法都可以达到目的，具体使用哪种方法取决于实际需求。
总之，了解这些技巧可以帮助我们更好地处理网页加载和交互，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8242
