文章目录
- 一、前言
- 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')
三、最后
本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕