adminLte解决iframe高度问题

adminLte解决iframe高度问题adminLte默认是全局刷新,也就是不存在frame页面,经过修改,可以很容易实现右边内容框用frame实现页面刷新,这样就不需要整个页面全局刷新,点击相应菜单时,只会刷新frame窗口,但是有一个问题就是frame默认高度只有一丁点,百度之后用了自适应也会有各种问题,比如高度只能拉伸不会缩短,在解决的道路上真的是没有一个完美的解决方案,经过自己研究,发现一个非常简单的方法,那就是用js获取wi…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

adminLte默认是全局刷新,也就是不存在frame页面,经过修改,可以很容易实现右边内容框用frame实现页面刷新,这样就不需要整个页面全局刷新,点击相应菜单时,只会刷新frame窗口,但是有一个问题就是frame默认高度只有一丁点,百度之后用了自适应也会有各种问题,比如高度只能拉伸不会缩短,在解决的道路上真的是没有一个完美的解决方案,经过自己研究,发现一个非常简单的方法,那就是用js获取window的innerHeight,代码实现window.innerHeight,然后出去顶部的状态栏,以及空白部分,经过测试,窗口高度减去90是最合适的,也可以根据你自己的情况加减,最后调至一个最完美高度,发现任何分辨率都不会有问题!

代码如下:

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <!-- Main content -->
    <section class="content container-fluid">
        <iframe id="menuFrame" name="menuFrame" src="{:url('admin/index/welcome')}" style="overflow:visible;"
                scrolling="auto"
                frameborder="no" height="100%" width="100%">
        </iframe>
        <!--------------------------
          | Your Page Content Here |
          -------------------------->

    </section>
    <!-- /.content -->
</div>

 

<script>
    $("#menuFrame").height(window.innerHeight-90);
</script>

 

更新问题:第一次加载页面时高度固定了,无法动态改变。

解决方案:js监听每次frame的地址变化后重新计算改变高度

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/164544.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • windows10虚拟机安装_虚拟机一键安装版

    windows10虚拟机安装_虚拟机一键安装版[XP虚拟机安装]VMware安装XP虚拟机下载VMware下载XPProfessional,我是在这个网站下的http://www.runker.net/windows-xp-sp3.html新建虚拟机,选择典型选择刚刚下载的XP镜像文件(这里用简易安装更方便,如果不用简易安装还需要进BIOS设置CD启动项啥的,安装过程也需要自己一步步操作,麻烦一些)点击下一步,要求填写秘钥,百度搜索秘钥填进去可以参考https://zhidao.baidu.com/question/45439092

    2022年8月16日
    5
  • jar 解压war_war包解压命令

    jar 解压war_war包解压命令文章来源:java实现可压缩或解压缩WAR文件packageutils;importjava.io.BufferedInputStream;importjava.io.BufferedOutputStream;importjava.io.File;importjava.io.FileInputStream;importjava.io.FileNotFoundException;impo…

    2022年10月5日
    1
  • LoadRunner11实操压力测试-一步一步慢慢来

    LoadRunner11实操压力测试-一步一步慢慢来录制脚本、修改脚本、运行脚本、测试结果

    2022年7月18日
    16
  • 小白勿进!安卓版java游戏盒下载「建议收藏」

    小白勿进!安卓版java游戏盒下载「建议收藏」为什么要分库分表?首先回答一下为什么要分库分表,答案很简单:数据库出现性能瓶颈。用大白话来说就是数据库快扛不住了。数据库出现性能瓶颈,对外表现有几个方面:大量请求阻塞在高并发场景下,大量请求都需要操作数据库,导致连接数不够了,请求处于阻塞状态。SQL操作变慢如果数据库中存在一张上亿数据量的表,一条SQL没有命中索引会全表扫描,这个查询耗时会非常久。存储出现问题业务量剧增,单库数据量越来越大,给存储造成巨大压力。从机器的角度看,性能瓶颈无非就是CPU、内存、磁盘、网络这些,要解决性能瓶颈

    2022年7月8日
    28
  • TreeView的RenderControl的问题「建议收藏」

    TreeView的RenderControl的问题「建议收藏」TreeView,这东西,正常情况下一般是不用的,不过我们的美工,没弄个树型的样式出来,没折,将就用一下TreeView了说重点:环境搭建:一页面,拖一下TreeView控件上去,随便添加几个项。然后Page_Load事件里输出:CodeSystem.IO.StringWritersw=newSystem.IO.StringWriter();…

    2022年7月20日
    13
  • 国外企业电子邮箱大全,国外用邮箱哪个好?怎么注册国外邮箱?「建议收藏」

    国外企业电子邮箱大全,国外用邮箱哪个好?怎么注册国外邮箱?「建议收藏」外贸、物流、留学移民等公司都会用到能往国外发邮件的邮箱。在知乎上看到,TOM企业邮箱国内国外都能用,移动办公也方便。国外用邮箱群发邮件群发开发信、给客户群发节日祝福都会企业邮箱的邮件群发功能。用群发单显能起到事半功倍的效果,如下图,登录邮箱后,点击【写邮件】,再点击【群发单显】就能一次几百封的群发邮件了。如何是给公司所有员工群发邮件通知,还是邮件群组更方便。像微信群一样,把所有人拉到一个群组里,往这个组里发通知,群里其他人都能收到,适用于公司内部多部门、跨地区管理沟通。TOM这个国际邮箱之所以用的

    2022年7月12日
    73

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号