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

一、前言

上面是父前端项目里的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内部。

2.2、实现_self跳转

执行下面的代码即可在浏览器当前标签页下实现跳转：

window.parent.window.open(url, '_self')

三、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕