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的地址变化后重新计算改变高度

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 最快的方法来清除Chrome浏览器DNS高速缓存

    最快的方法来清除Chrome浏览器DNS高速缓存

  • 按钮点击效果(水波纹)

    按钮点击效果(水波纹)

  • 实现学员管理系统

    实现学员管理系统”””班级学员管理系统需求:简单的设计一下首页。1、添加学员信息,设计简单的页面2、删除学员信息,学员信息为空则不执行操作3、修改学员信息,学员信息为空不执行操作(当修改的学员的姓名不在列表中时返回错误)4、查找学员信息,把学员信息,依次输出在终端页面”””Student_List=[]whileTrue:print(”)print(‘–…

  • EagleEye_eyekey

    EagleEye_eyekey摘要:EagleEye作为阿里集团老牌的链路跟踪系统,其自身业务虽不在交易链路上,但却监控着全集团的链路状态,特别是在中间件的远程调用上,覆盖了集团绝大部分的场景,在问题排查和定位上发挥着巨大的作用,保障了各个系统的稳定性,为整个技术团队打赢这场战役保驾护航。作者:王华锋(水彧)背景 双十一一直是阿里巴巴集团每年要打的一场大战役。要打赢这场战役,技术上,不仅仅是几个应用、几个

  • extjs中的flex_Extjs 教程「建议收藏」

    extjs中的flex_Extjs 教程「建议收藏」基本介绍ExtJS代表扩展JavaScript,是基于YUI(Yahoo用户界面)的sencha的JavaScript框架和产品。它基本上是一个具有现代UI的桌面应用程序开发平台。本教程完全理解ExtJS。这个参考将带你通过简单和实用的方法,同时学习ExtJS。适用人群本教程为初学者准备,帮助他们了解ExtJS的概念,以构建动态WebUI。学习前提对于本教程,读者应该具有HTML,CSS…

  • Webpack插件按需加载组件_webpack懒加载

    Webpack插件按需加载组件_webpack懒加载因为Vue是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源,造成网站首页打开速度变慢,降低用户体验。为了解决上面问题,我们需要对Vue实现组件懒加载。本文将对懒加载的实现原理以及使用进行讲解。

发表回复

您的电子邮箱地址不会被公开。

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