js判断页面是否是在iframe里面

文章目录

一、前言
- 1.1、`_blank`跳转
- 1.2、`_self`跳转
二、方法
- 2.1、判断子项目是否是在`iframe`内部
- 2.2、实现`_self`跳转
三、最后

一、前言

上面是父前端项目里的iframe加载了子前端项目的页面。此时如果点击子项目的内容，如果要进行父项目浏览器页面跳转，可以使用方法window.open(url, target)。这里的target会有2种跳转方式，_self和_blank。

1.1、`_blank`跳转

如果是_blank，那就是浏览器打开新的标签页，直接在子项目里使用window.open(url, '_blank')即可实现

1.2、`_self`跳转

如果是_self，需要实现的是浏览器在当前标签页内重定向URL地址，这就是本文需要说的内容

二、方法

2.1、判断子项目是否是在`iframe`内部

console.info("🚀 ~ file:index method:isInFrame line:66 ----- window.frames.length", window.frames.length)
console.info("🚀 ~ file:index method:isInFrame line:67 ----- parent.frames.length", parent.frames.length)
if (window.frames.length !== parent.frames.length) {console.info("🚀 ~ file:index method:isFrame line:66 -----", '方式二')return true
}

如果不是在iframe内部，此时window.frames.length和parent.frames.length是一致的。因此判断不一致的话就肯定是在iframe内部了。可以看到上面示例window.frames的长度是0，而parent.frames的长读是1，因此也就确定了子项目是在iframe内部。