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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 打开天窗说亮话

    打开天窗说亮话

    2021年8月5日
    62
  • 树莓派的产品定位,以及探讨与ARM开发板的区别

    树莓派的产品定位,以及探讨与ARM开发板的区别目录一、树莓派的几点认识二、树莓派的定位,与ARM开发板有不同的目标用户三、树莓派与嵌入式开发的区别1、树莓派能不能做为嵌入式的ARM开发板?2、树莓派能不能进行嵌入式开发与学习?四、树莓派上的实践一、树莓派的几点认识1、树莓派是一款基于Linux系统的单板机电脑。它由英国的树莓派基金会所开发,目的是以低价硬件及自由软件刺激在学校的基本的计算机科学教育。树莓…

    2022年6月9日
    29
  • js倒计时跳转页面_什么代码可以实现网页的跳转

    js倒计时跳转页面_什么代码可以实现网页的跳转以下是倒计时120秒跳转代码,对于需要倒计时的页面非常实用,如果倒计时后不想跳转,可以注销掉location.href=这行代码<spanclass=”time”></span><script>vart=120;vartime=document.getElementsByClassName(“time”)[0];functionfun(){t–;time.innerHTML=t;if(t<=0

    2022年8月12日
    3
  • 系统调用(int 0x80)详解

    系统调用(int 0x80)详解1、系统调用初始化在系统启动时,会在sched_init(void)函数中调用set_system_gate(0x80,&system_call),设置中断向量号0x80的中断描述符:#defineset_system_gate(n,addr) _set_gate(&idt[n],15,3,addr)其中15表示此中断号对应的是陷阱门,注意,这个中断向量不是中断门描述符

    2025年11月6日
    2
  • 电容的基础知识

    常用电容按介质区分有纸介电容、油浸纸介电容、金属化纸介电容、云母电容、薄膜电容、陶瓷电容、电解电容等。表1 常用电容的结构和特点电容种类电 容 结 构&#

    2021年12月26日
    106
  • 互联网后端基础技术

    互联网后端基础技术互联网后端基础技术

    2022年4月22日
    38

发表回复

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

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