文章目录
- 一、前言
- 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内部。
2.2、实现_self跳转
执行下面的代码即可在浏览器当前标签页下实现跳转：
window.parent.window.open(url, '_self')
三、最后
本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕
