iframe嵌入的页面只能在iframe中跳转显示问题以及高度自适应内容问题

记录这几天做一个后台管理系统的时候遇到了一个问题。

我的项目结构是，导航栏不变，页面主体部分自由切换，很自然的就想到了使用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页面跳转的问题(跳转到父页面、最外层页面、本页面) - 波波虎 - 博客园

各位大佬请指教，希望能帮助到有志之士

iframe嵌入的页面只能在iframe中跳转显示问题以及高度自适应内容问题相关推荐

html5 iframe 无法滚动条,iframe嵌入的页面没有滚动条
怎么样iframe没有滚动条页面有滚动条 iframe没有滚动条 scrolling="No"这个去掉了但是页面超过了屏幕,应该有不是到你只什么意思哦frameborder=&q ...
关于iframe嵌入的页面无法正常使用的可能原因其一------跨域问题
背景: 1.使用的谷歌浏览器. 2.独立的系统,单独输入连接访问没有问题. 3.通过iframe嵌入后新系统后,某些功能不能正常使用,多见于涉及到session中的操作时. 原因: 谷歌浏览器在83版 ...
点击右侧导航栏，实现iframe嵌入子页面中div，滑动到最上面
2019独角兽企业重金招聘Python工程师标准>>> // 点击对应的nav里的li标签,页面就滚动到哪里 $('.title-list > li').click(funct ...
Angular项目中,基于esriLoader+iframe实现不同页面调用3.x与4.x ArcGIS JS API
场景: 现在有个项目同时涉及二维.三维地图功能,明确要求使用ArcGIS 平台.目前ArcGIS API For JS有两个系列3.x和4.x,3.x只能实现二维功能,4.x主要支持三维功能,同时也支 ...
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
文章目录前言一.创建 Android 项目二.关联 Android 工程与 Flutter Module 工程 1.配置 Flutter Module工程 2.配置 build.gradle 3 ...
Vue限制页面只能在微信浏览器中打开
最近正在做一个微信服务号的项目,忽然接到需求,让这个页面只能在微信中访问,其他地方不可以.做出的效果是这样的实现方式:在index.heml中加入script判断 <!DOCTYPE html ...
vue iframe高度自适应
我们在开发过程中会遇到iframe嵌入外部页面问题,通常外部页面高度不一,如果我们写死iframe高度,就会出现滚动条.通过以下设置会避免滚动条情况 <iframeref="ifram ...
iframe的高度自适应
现在有这样一个情景:a页面需用使用iframe嵌入b页面,而b页面的内容高度是不固定的,有可能是300px,有可能是500px......,这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条,怎么实 ...
html怎样使整个页面居中,如何使整个页面内容居中使高度适应内容自动伸缩
如何使整个页面内容居中使高度适应内容自动伸缩发布时间:2013-08-06 15:13:43 作者:佚名我要评论如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常 ...
freemarker模板文件中文本域(textarea)的高度自适应实现
2019独角兽企业重金招聘Python工程师标准>>> freemarker模板文件中实现文本域(textarea)的高度自适应实现. 从网上找的大部分办法中很多方法兼容性并不好,要 ...

iframe嵌入的页面只能在iframe中跳转显示问题以及高度自适应内容问题

iframe嵌入的页面只能在iframe中跳转显示问题以及高度自适应内容问题相关推荐

最新文章

热门文章