记录这几天做一个后台管理系统的时候遇到了一个问题。
我的项目结构是,导航栏不变,页面主体部分自由切换,很自然的就想到了使用Iframe标签,将需要改变的页面嵌入就可以了。
说干就干
首先我将iframe的src属性赋值一个初始的页面,设置一下iframe的宽高样式
<iframe src="./homepage01.html" frameborder="0" scrolling="no"></iframe>
iframe {
width: 100vw;
margin-top: 66px;
}
问题就来了:这宽度到是好设置,可是着高度咋搞啊?我总不能设置固定高度把,万一以后加加加内容咋搞?
嘿嘿,聪明的小脑袋马上就百度了。
还真让我找到了。。
我们所有的标签元素都是放在Body标签中,只要获取Body标签的高度,不就是我整个嵌入页面的高度嘛
妈妈再也不用担心我以后加内容了。。
说干就干,JS搞起
//获取iframe标签
const iframe = document.querySelector('iframe')
//Iframe加载完成后再设置
iframe.onload = () => {
console.dir(iframe)
iframe.height = iframe.contentDocument.body.clientHeight
}
然后我就继续写啊写~
又发现,我跳转的页面怎么只能在Iframe标签中显示啊?为什么为什么?疯狂百度。。。这次我还真没找到。。
呜呜呜,没办法,只能求助老师。。。
果然,遇到问题问老师,分分钟解决
首先,如果你使用的是a标签进行跳转,你就可以使用a标签的target属性
属性值如下,大家自己去尝试
target属性值 | 描述 |
---|---|
_self | 在本窗口中打开 |
_blank | 在新窗口中打开 |
_parent | 在父级窗口中打开 |
_top | 在最外层窗口中打开 |
framename | 指定窗口连接中打开,没有尝试过。 |
好的老师,我回去就尝试一下
我一看,我敲,我的不是a标签啊,纯纯div,咋搞啊,div怕是没有target属性哦,疯狂百度。。。
嘿嘿,这次真给我找到了,开心坏了。。。
我们JS中的BOM部分,跳转页面我们使用的都是
window.location.href='./index.html'
但是但是,居然还有。。。
parent.location.href='./index.html'
top.location.href='./index.html'
我哭得好大声,我终于有救了。
window表示在当前窗口跳转页面,parent标签在当前窗口的父级窗口中跳转,top表示在当前窗口的最外层窗口在跳转。
耶~终于得救了。
总结一下:
1.老师说的,面向百度编程我信了
2.遇到问题不要慌,百度或者问大佬
3.遇到很长时间解决不到的问题,放一放,你就会很快解决(这是真的,信我)
4.多少有点啰嗦。。放上跳转问题博主的文章
js页面跳转的问题(跳转到父页面、最外层页面、本页面) - 波波虎 - 博客园
各位大佬请指教,希望能帮助到有志之士